我從頭開始建立了終極教育網站 — 第 4 天
第三天，我們研究了內容本身，這是任何網站都需要的。將其稱為第 4 天可能會感覺很奇怪，因為嚴格來說這是第 6 天。
是的，我知道這聽起來很奇怪，但周六和周日我不工作。我花時間與家人在一起放鬆，而不是工作。請記住，作為開發人員，保持工作與生活的平衡至關重要。
今天我將開發共價半徑計算器。這是Noah Kleij 在第3 天提出的建議，我僅在那天實現了該建議的基本版本，但是，今天我將在Chemistry/3/covalent-radii 目錄中為其創建一個專用頁面-和-bond- length.html。市面上沒有共價半徑計算器，至少在 Google 上搜尋不到。
好的，現在讓我們開始建立計算器頁面。
第 22 小時：新增計算器
我將在 Chemistry/3/ 目錄中建立 covalent-radii-and-bond-length.html 檔案。此頁面將包括我們昨天使用的共價半徑計算器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covalent Radii Calculator </title>
<!-- styles and scripts -->
</head>
<body>
<main>
<!-- Content goes here -->
</main>
<!-- script for molecule calculation and styles -->
</body>
</html>
登入後複製
這具有通常的基本 HTML，但我故意將此頁面保持最小。
現在，讓我們複製文字和計算器，看看一切是否正常。我已經用 ChatGPT 多次寫過描述，因為它不會一下子殺死它，花了很多時間來提示它。
<main>
<div>
<p>This contains all the text, and also the calculator container.</p>
<p>Now, I'll add the styling for this, inline for now since I don't want to create a new style file, and also since we don't have much time left.<br>
</p>
<pre class="brush:php;toolbar:false"><style>
body {
font-family: sans-serif;
line-height: 1.6;
margin: 20px;
color: #d0d0d0;
background-color: #1e1e1e;
transition: background-color 0.3s ease;
position: relative;
display: flex;
}
h2 {
color: #95a5a6;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
margin-top: 30px;
transition: color 0.3s ease;
position: relative;
}
h2:hover {
color: #3498db;
}
h2:first-of-type {
margin-top: 0;
}
p {
margin-bottom: 15px;
transition: color 0.3s ease;
}
p strong {
font-weight: 600;
color: #e74c3c;
}
p:hover {
color: #bbb;
}
ul,
ol {
margin-bottom: 15px;
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
background-color: #2c2c2c;
}
th,
td {
border: 1px solid #555;
padding: 8px;
text-align: left;
transition: background-color 0.3s ease;
}
th {
background-color: #3498db;
color: white;
}
tr:nth-child(even) {
background-color: #333;
}
tr:hover {
background-color: #444;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #217dbb;
}
/* Progress Bar */
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 5px;
background-color: #3498db;
transition: width 0.3s ease;
z-index: 1000;
}
/* Completed Checkmark */
h2::after {
content: '13';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #3498db;
font-size: 1.2em;
opacity: 0;
transition: opacity 0.3s ease;
}
h2.completed::after {
opacity: 1;
}
/* Sidebar Styles */
#sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 220px;
height: calc(100vh - 40px);
background-color: #2c2c2c;
padding: 15px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
overflow-y: auto;
z-index: 999;
}
#sidebar::-webkit-scrollbar {
width: 0px;
}
#sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
#sidebar li {
margin-bottom: 10px;
}
#sidebar a {
display: block;
color: #95a5a6;
padding: 10px 12px;
transition: background-color 0.3s ease;
border-radius: 4px;
}
#sidebar a:hover,
#sidebar a.active {
background-color: #333;
color: #fff;
}
/* Main content area adjustment */
main {
flex: 1;
padding: 10px;
margin-right: 60px;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body,
h2,
p,
ul,
ol,
table,
img {
animation: fadeIn 0.5s ease-out;
}
/* Right sidebar */
#right-sidebar {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
/* Adjusted width */
height: calc(100vh - 40px);
background-color: #2c2c2c;
padding: 15px 0;
/* Adjusted padding */
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
border-radius: 0.5rem;
}
#right-sidebar a {
display: flex;
justify-content: center;
align-items: center;
color: #95a5a6;
padding: 10px;
transition: background-color 0.3s ease;
border-radius: 4px;
margin-bottom: 5px;
height: 40px;
/* Set height for a circular look */
width: 40px;
/* Set width for a circular look */
}
#right-sidebar a:hover,
#right-sidebar a.active {
background-color: #333;
color: #fff;
}
#right-sidebar img {
max-width: 20px;
height: auto;
display: block;
margin: 0 auto;
filter: invert(65%) sepia(3%) saturate(69%) hue-rotate(185deg) brightness(87%) contrast(86%);
transition: transform 0.3s ease;
}
#right-sidebar a:hover img,
#right-sidebar a.active img {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(221deg) brightness(105%) contrast(102%);
transform: scale(1.1);
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
body {
flex-direction: column;
/* Stack elements vertically */
margin: 10px;
/* Reduce margin */
}
main {
padding: 5px;
}
#sidebar {
position: static;
/* Make sidebar static */
width: 100%;
/* Full width */
height: auto;
margin-bottom: 10px;
/* Add margin below sidebar */
box-shadow: none;
}
#sidebar ul {
display: flex;
overflow-x: auto;
padding: 0px 10px;
margin-bottom: 10px;
}
#sidebar li {
margin-bottom: 0px;
}
#sidebar a {
padding: 10px 10px;
margin: 0px 5px;
white-space: nowrap;
border-radius: 10px;
}
#right-sidebar {
position: fixed;
top: initial;
/* Remove top position */
bottom: 0;
/* Stick to bottom */
right: 0;
width: 100%;
height: auto;
/* Adjust height */
flex-direction: row;
padding: 0;
border-radius: 0;
box-shadow: none;
}
#right-sidebar a {
margin-bottom: 0;
/* Remove bottom margin */
width: auto;
height: 40px;
}
#right-sidebar img {
max-width: 20px;
}
}
@media (min-width: 769px) {
/* Adjust main content for larger screens to reduce gap if needed */
main {
margin-left: 50px;
/* Further reduce the margin */
}
}
</style>
<style for="Calculator">
.calculator-container {
background-color: #2c2c2c;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
margin: 20px 0;
}
.calculator-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.calculator-controls input,
.calculator-controls button {
padding: 10px;
border-radius: 4px;
border: 1px solid #555;
background-color: #333;
color: #d0d0d0;
transition: background-color 0.3s ease;
}
.calculator-controls input:focus,
.calculator-controls button:focus{
outline: none;
box-shadow: 0 0 5px #3498db;
}
.calculator-controls input{
flex: 2;
}
.calculator-controls button{
flex: 1;
}
.calculator-controls button:hover {
background-color: #3498db;
color: white;
cursor: pointer;
}
#calculator-output {
overflow-x: auto; /* Enable horizontal scrolling for wider tables */
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}
#calculator-output th,
#calculator-output td {
border: 1px solid #555;
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db;
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #333;
}
#calculator-output tr:hover {
background-color: #444;
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.calculator-container h2 {
margin-top: 0; /* Remove top margin for calculator heading */
}
.calculator-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
align-items: center; /* Align input, SVG, and button vertically */
}
#molecule-svg-container {
width: 50px; /* Adjust size as needed */
height: 50px;
border: 1px solid #555; /* Optional border */
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
#molecule-svg-container svg {
max-width: 100%;
max-height: 100%;
}
</style>
登入後複製
這將處理整個內容頁面的樣式，包括計算器和主要內容。與前一個不同的是，它的內容採用了深色主題，網站的導覽列位於右側。作為一個人，以“共價半徑計算器”為目的進行搜索，他們想要計算器，進行某些計算，然後離開該網站。他們主要是有時間實際瀏覽網站的人。
通常攻讀化學較高學位的學生，請搜尋這些術語。所以，最好不要浪費他們的時間。我們確實保留了導航，只是將其在桌面上移至右側，在行動裝置上移至底部。我們只是直接向他們展示了計算器，並沒有浪費他們的任何時間來查看導航。只是給他們他們想要的東西。請記住：匹配搜尋意圖應該是您的首要任務。如果沒有，任何搜尋引擎都不會推廣它。
最後，讓我們加入 javascript，其中包含計算器的邏輯，並更新 svg，目前僅適用於少數分子，因為我既沒有時間，也沒有 SVG 技能：
;
document.addEventListener('DOMContentLoaded', function () {
令 molecularInput = document.getElementById('分子輸入');
讓calculateBtn = document.getElementById('calculate-btn-56');
讓calculatorOutput = document.getElementById('calculator-output-56');
設 molecularSvgContainer = document.getElementById('molecule-svg-container');
常量共價半徑 = {
'H': 31, 'He': 28, 'Li': 128, 'Be': 96, 'B': 84, 'C': 73, 'N': 71, 'O': 66, 'F ': 57, '內': 58,
'Na': 166, 'Mg': 141, 'Al': 121, 'Si': 111, 'P': 107, 'S': 105, 'Cl': 102, 'Ar': 106,
「K」：203、「Ca」：176、「Sc」：170、「Ti」：160、「V」：153、「Cr」：139、「Mn」：139、「Fe」：132、「Co ” ': 126,
'Ni': 124, 'Cu': 132, 'Zn': 122, 'Ga': 122, 'Ge': 120, 'As': 119, 'Se': 120, 'Br': 120, 'Kr ': 116,
'Rb': 220、'Sr': 195、'Y': 190、'Zr': 175、'Nb': 164、'Mo': 154、'Tc': 147、'Ru': 146、'Rh ': 142,
'Pd': 139、'Ag': 145、'Cd': 144、'In': 142、'Sn': 139、'Sb': 139、'Te': 138、'I': 139、'Xe ': 140,
'Cs'：244，'Ba'：215，'La'：207，'Ce'：204，'Pr'：203，'Nd'：201，'Pm'：199，'Sm'：198，'Eu ': 198,
'Gd': 196, 'Tb': 194, 'Dy': 192, 'Ho': 192, 'Er': 189, 'Tm': 190, 'Yb': 187, 'Lu': 187,
「Hf」：175、「Ta」：170、「W」：162、「Re」：151、「Os」：144、「Ir」：141、「Pt」：138、「Au」：138、「Hg ” ': 149,
「Tl」：148，「Pb」：146，「Bi」：148，「Po」：140，「At」：150，「Rn」：145
};
常量電負性 = {
'H'：2.20，'Li'：0.98，'Be'：1.57，'B'：2.04，'C'：2.55，'N'：3.04，'O'：3.44，'F'：3.98，'Na '：0.93，
'鎂'：1.31，'鋁'：1.61，'矽'：1.90，'P'：2.19，'S'：2.58，'Cl'：3.16，'K'：0.82，'Ca'：1.00，'Sc '：1.36，
‘Ti’：1.54，‘V’：1.63，‘Cr’：1.66，‘Mn’：1.55，‘Fe’：1.83，‘Co’：1.88，‘Ni’：1.91，‘Cu’：1.90，
'Zn'：1.65，'Ga'：1.81，'Ge'：2.01，'As'：2.18，'Se'：2.55，'Br'：2.96，'Rb'：0.82，'Sr'：0.95，
'Y'：1.22，'Zr'：1.33，'Nb'：1.60，'Mo'：2.16，'Tc'：1.90，'Ru'：2.20，'Rh'：2.28，'Pd'：2.20，
「Ag」：1.93，「Cd」：1.69，「In」：1.78，「Sn」：1.96，「Sb」：2.05，「Te」：2.10，「I」：2.66，「Cs」：0.79，
'Ba'：0.89，'La'：1.10，'Ce'：1.12，'Pr'：1.13，'Nd'：1.14，'Pm'：1.13，'Sm'：1.17，'Eu'：1.20，
'Gd'：1.20，'Tb'：1.20，'Dy'：1.22，'Ho'：1.23，'Er'：1.24，'Tm'：1.25，'Yb'：1.1，'Lu'：1.27，
「Hf」：1.3，「Ta」：1.5，「W」：2.36，「Re」：1.9，「Os」：2.2，「Ir」：2.2，「Pt」：2.28，「Au」：2.54，
「Hg」：2.00，「Tl」：1.62，「Pb」：2.33，「Bi」：2.02，「Po」：2.0，「At」：2.0，「Rn」：2.2
};
函數解析分子（公式）{
const 正規表示式 = /([A-Z][a-z]*)(d*)/g;
讓匹配；
常數元素 = {};
while ((match = regex.exec(公式)) !== null) {
const 元素 = match[1];
const count = parseInt(match[2] || 1, 10);
元素[元素] = (元素[元素] || 0) 計數；
}
返回元素；
}
函數計算BondLengths（分子）{
const 元素 = parseMolecule(分子);
const elementSymbols = Object.keys(elements);
常量結果 = [];
常量債券=[]；
const 半徑資訊 = [];
//首先將不同原子的共價半徑加到結果中。
for (elementSymbols 的 const 元素) {
if (covalentRadii[元素]) {
半徑資訊.push({
元素： 元素，
半徑：covalentRadii[元素]
});
}
}
for (設 i = 0; i 0) {
結果.push({
半徑數據：半徑信息，
類型：“共價半徑”
});
}
if (bonds.length > 0) {
bond.forEach(債券 => {
結果.push({
債券：債券.債券，
鍵長：鍵.鍵長，
類型：“鍵長”
});
});
}
返回結果；
}
calculateBtn.addEventListener('點選', function () {
const 分子 = molecularInput.value.trim();
如果（！分子）{
Alert('請輸入一個分子。');
返回;
}
CalculatorOutput.innerHTML = '<div>
</div>
登入後複製
以上是我從頭開始建立了終極教育網站 — 第 4 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055612無法在Windows 10中安裝？
4 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
北端：融合系統，解釋
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：社區，圖書館和資源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
C/C在JavaScript口譯員和編譯器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
Python vs. JavaScript：比較用例和應用程序
Apr 21, 2025 am 12:01 AM
Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
