很多人問我，要花多少時間在這上面。我想可能需要兩到三周。但是，這個問題讓我重新思考我在網(wǎng)站上花費了多少時間。我光是主頁就花了8個小時。因此，我決定快速創(chuàng)建內(nèi)容，而不是像前幾天那樣關(guān)注微小的細(xì)節(jié)。我已經(jīng)浪費了你們很多注意力，現(xiàn)在讓我們直接進(jìn)入流程。
第 19 小時：創(chuàng)建化學(xué)內(nèi)容頁面
我將首先在 Chemistry/3/ 目錄中創(chuàng)建 periodicality-of-elements-qa.html 文件。此頁面將包含有關(guān)元素周期性主題的問題和解答。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Questions and Answers</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>As usual, I included a basic HTML boilerplate with links to necessary scripts and styles, along with navigation to main pages. I am using a container div, aside element with the id table-of-contents, which will be populated using javascript, and finally the main tag.</p>
<p>Next, I added the content, formatted with heading tags and some paragraph tags for the main body. For formulas and symbols I used the LaTeX syntax, LaTeX is used because it is the go-to standard:<br>
</p>
<pre class="brush:php;toolbar:false"> <h2>
<p>This contains a lot of content, which is formatted using headings and sub-headings, some lists and tables. I also added an "About the Author" tag for authenticity.</p>
<p>I needed to style this page so that the text can be readable, and it doesn't look too bad. I will add an additional css file into this page, keeping style.css and style-main.css for common elements.</p>
<h2>
Hour 20: Styling the content page and adding JS for dynamic Table of Contents
</h2>
<p>I created an style tag inside the head element, and added basic style to it:<br>
</p>
<pre class="brush:php;toolbar:false"> <style>
header {
background: linear-gradient(135deg, #252525 0%, #303030 100%); /* Subtle gradient for depth */
padding: 1.2rem 0; /* Slightly increased padding */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced, darker shadow */
position: sticky;
top: 0;
z-index: 1000; /* Increased z-index for better layering */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for sticky effect */
transform: translateY(0); /* Initial state for smooth sticky animation */
}
header.sticky-active {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Different shadow when sticky */
transform: translateY(-5px); /* Slight lift when sticky */
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px; /* Slightly increased side padding */
}
.logo {
font-size: 2rem; /* Slightly larger logo */
font-weight: 700; /* Bolder logo */
color: #7db4ff; /* Updated logo color, slightly lighter */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Subtle text shadow for depth */
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: scale(1.05); /* Gentle scale on hover */
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 30px; /* Use gap for spacing between list items */
}
nav ul li a {
text-decoration: none;
color: #f0f0f0; /* Slightly brighter text color */
position: relative; /* For the underline effect */
padding-bottom: 4px; /* Space for the underline */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
overflow: hidden; /* Clip the pseudo-element */
}
nav ul li a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #7db4ff; /* Same as logo color for consistency */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.4s ease-out;
}
nav ul li a:hover {
color: #90caf9; /* Lighter hover color */
transform: translateY(-2px); /* Slight lift on hover */
}
nav ul li a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Optional: Add an active state highlight */
nav ul li a.active {
color: #90caf9;
font-weight: 600;
}
nav ul li a.active::before {
transform: scaleX(1);
}
/* Enhancements for Mobile (consider using JavaScript for more advanced mobile menus) */
@media (max-width: 1024px) {
header {
display: hidden;
}
}
:root {
--primary-bg: #f9f9f9; /* Very light grey for a softer white */
--secondary-bg: #ffffff; /* Pure white for content areas */
--text-primary: #212121; /* Dark grey for primary text */
--text-secondary: #757575; /* Medium grey for secondary text */
--accent-color: #2962ff; /* A vibrant blue */
--hover-color: #5393ff; /* Lighter blue for hover states */
--border-color: #e0e0e0; /* Light grey for borders */
--code-bg: #f0f0f0; /* Very light grey for code backgrounds */
--code-text: #333333; /* Dark grey for code text */
--toc-active: #2962ff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
}
body {
font-family: 'Roboto', sans-serif; /* A clean and modern sans-serif font */
line-height: 1.6;
margin: 0;
background-color: var(--primary-bg);
color: var(--text-primary);
padding-bottom: 40px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Custom Scrollbar - Light theme version */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #bdbdbd;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 60px;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-md);
border-radius: 8px;
display: grid;
grid-template-columns: minmax(250px, 300px) 1fr;
gap: 40px;
}
#table-of-contents {
padding: 30px;
background-color: var(--secondary-bg);
border-radius: 6px;
position: sticky;
top: 30px;
height: fit-content;
border: 1px solid var(--border-color);
}
/* Custom Scrollbar for Table of Contents */
#table-of-contents::-webkit-scrollbar {
width: 6px; /* Thinner scrollbar */
}
#table-of-contents::-webkit-scrollbar-track {
background: #f1f1f1; /* Light background for the track */
border-radius: 3px; /* Slightly rounded track */
}
#table-of-contents::-webkit-scrollbar-thumb {
background-color: #bdbdbd; /* Medium grey for the thumb */
border-radius: 3px; /* Slightly rounded thumb */
}
#table-of-contents::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e; /* Darker grey on hover */
}
#table-of-contents > h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 15px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
text-align: left;
}
#table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
#table-of-contents li {
margin-bottom: 10px;
padding-left: 0;
border-left: 3px solid transparent;
transition: border-left-color var(--transition-fast), color var(--transition-fast);
}
#table-of-contents li:hover,
#table-of-contents li.active {
border-left-color: var(--toc-active);
}
#table-of-contents li.active > a {
color: var(--toc-active);
font-weight: 500;
}
#table-of-contents a {
text-decoration: none;
color: var(--text-secondary);
display: block;
padding: 6px 0;
transition: color var(--transition-fast);
}
#table-of-contents a:hover {
color: var(--hover-color);
}
#table-of-contents ul ul {
margin-left: 15px;
margin-top: 6px;
}
/* Main content styles - Focus on readability */
main {
padding: 40px;
border-radius: 6px;
overflow: hidden;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-sm);
}
main > *:not(:last-child) {
margin-bottom: 2em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
h1 {
font-size: 2.5rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.4em;
margin-bottom: 1em;
}
h2 {
font-size: 24px;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 0.3em;
margin-bottom: 0.9em;
color: var(--accent-color);
}
h3 {
font-size: 1.6rem;
margin-bottom: 0.7em;
}
h4 {
font-size: 1.4rem;
margin-bottom: 0.6em;
}
p {
margin-bottom: 1.5em;
color: var(--text-secondary);
orphans: 3;
widows: 3;
word-break: break-word;
}
ul, ol {
margin-left: 25px;
margin-bottom: 1.7em;
}
li {
margin-bottom: 0.7em;
color: var(--text-secondary);
line-height: 1.5;
word-break: break-word;
}
strong {
font-weight: 600;
color: var(--text-primary);
}
em {
font-style: italic;
color: var(--accent-color);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast);
border-bottom: 1px solid transparent; /* Subtle underline on hover */
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2em;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--secondary-bg);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
word-break: break-word;
}
th {
background-color: #f5f5f5; /* Lighter header background */
font-weight: 600;
color: var(--text-primary);
}
tbody tr:nth-child(even) {
background-color: #fafafa; /* Very light grey for even rows */
}
/* Code blocks - Light theme styling */
pre {
background-color: var(--code-bg);
color: var(--code-text);
padding: 12px 18px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.6em;
white-space: pre-wrap;
border: 1px solid var(--border-color);
}
code {
font-family: 'Menlo', monospace;
background-color: #e8e8e8; /* Even lighter background for inline code */
color: var(--code-text);
padding: 3px 6px;
border-radius: 3px;
word-break: break-word;
}
pre code {
background-color: transparent;
padding: 0;
}
/* Horizontal rules - Simpler style */
hr {
border: none;
height: 1px;
background-color: var(--border-color);
margin: 2em 0;
}
/* Blockquotes - Clean separation */
blockquote {
border-left: 3px solid var(--accent-color);
padding: 10px 15px;
margin: 1.5em 0;
font-style: italic;
background-color: #f5f5f5;
border-radius: 3px;
color: var(--text-secondary);
}
blockquote p {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
max-width: 90%;
padding: 50px;
grid-template-columns: 1fr;
gap: 30px;
}
#table-of-contents {
position: static;
margin-bottom: 30px;
}
#table-of-contents > h2 {
text-align: center;
}
}
@media (max-width: 768px) {
main {
padding: 30px;
}
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 22px;
}
nav{
display:none;
}
}
@media (max-width: 480px) {
.container {
padding: 30px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 20px;
}
}
</style>
這只是基本樣式，對標(biāo)題和主要內(nèi)容進(jìn)行了一些更改，以確保元素可讀，不會太分散注意力，并且在整個網(wǎng)站上保持一致。
我還為表格、塊引用和代碼塊添加了 CSS，以提高可讀性。
我還想添加一個腳本來使左側(cè)的目錄具有交互性。因此，我將此腳本添加到 body 標(biāo)記的底部：
<script>
// script.js
document.addEventListener('DOMContentLoaded', () => {
const mainContent = document.querySelector('main');
const tableOfContents = document.getElementById('table-of-contents');
if (!mainContent || !tableOfContents) {
console.error('Main content or table of contents element not found.');
return;
}
const headings = mainContent.querySelectorAll('h2, h3, h4');
const tocList = document.createElement('ul');
let currentList = tocList;
const stack = [currentList];
headings.forEach(heading => {
const tagName = heading.tagName;
const id = heading.id;
const text = heading.textContent;
if (id) {
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = `#${id}`;
link.textContent = text;
listItem.appendChild(link);
if (tagName === 'H2') {
while (stack.length > 1) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H3') {
while (stack.length > 2) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H4') {
while (stack.length > 3) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
}
}
});
// Remove any empty ul elements that might have been created
function removeEmptyLists(list) {
Array.from(list.children).forEach(item => {
if (item.tagName === 'UL' && item.children.length === 0) {
item.remove();
} else if (item.tagName === 'LI') {
const childUl = item.querySelector('ul');
if (childUl) {
removeEmptyLists(childUl);
}
}
});
}
removeEmptyLists(tocList);
const tocTitle = document.createElement('h2');
tocTitle.textContent = 'Table of Contents';
tableOfContents.appendChild(tocTitle);
tableOfContents.appendChild(tocList);
});
</script>
此腳本會自動從主元素中的標(biāo)題生成嵌套目錄，該目錄可以無縫運行。該腳本會自動填充我之前創(chuàng)建的目錄旁標(biāo)記。
最后，我通過在 head 標(biāo)簽內(nèi)添加這些腳本和鏈接標(biāo)簽來添加對 LaTeX 公式和方程的支持。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$", right: "$", display: false },
{ left: "$$", right: "$$", display: true }
]
});
});
</script>
這樣，內(nèi)容頁面就完成了。我喜歡它的設(shè)計非常簡約，不會分散對內(nèi)容的注意力，并且仍然具有所有必要的功能。
如果您想了解實際版本的情況，而不僅僅是自己復(fù)制內(nèi)容，請參閱此處：元素的周期性 - 問題與解答
第 21 至 25 小時：完成化學(xué)內(nèi)容頁
我將在 Chemistry/3/ 文件夾中創(chuàng)建 periodicality-of-elements-notes.html 文件。這將包含有關(guān)元素周期性的注釋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Notes</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>This is the same base HTML structure as the previous file, periodicity-of-elements-qa.html. </p>
<p>Now, for the most time consuming part, copying over the massive text of the notes and formating it with headings, paragraphs, and lists. I've also used LaTeX syntax where appropriate.<br>
</p>
<pre class="brush:php;toolbar:false"> <h1>
Structure of Periodic Table
</h1>
<h2>
<p>I've added the base CSS from before, but I also added new CSS to style the calculator container, did I mention, this page also has a calculator, for interactivity:<br>
</p>
<pre class="brush:php;toolbar:false"> <style for="Calculator">
/* Light Mode Styles */
.calculator-container {
background-color: #f5f5f5; /* Light background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
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 #ccc; /* Light border */
background-color: #fff; /* White background */
color: #333; /* Dark text */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
}
.calculator-controls input:focus,
.calculator-controls button:focus {
outline: none;
box-shadow: 0 0 5px #3498db; /* Focus highlight (same as dark mode) */
}
.calculator-controls input {
flex: 2;
}
.calculator-controls button {
flex: 1;
}
.calculator-controls button:hover {
background-color: #e0e0e0; /* Slightly darker on hover */
cursor: pointer;
}
#calculator-output {
overflow-x: auto;
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
#calculator-output th,
#calculator-output td {
border: 1px solid #ccc; /* Light border */
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db; /* Header color (same as dark mode) */
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #f0f0f0; /* Slightly darker for even rows */
}
#calculator-output tr:hover {
background-color: #e8e8e8; /* Slightly darker on hover */
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #ccc; /* Light border */
border-top: 4px solid #3498db; /* Spinner color (same as dark mode) */
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;
color: #333; /* Darker text color for heading */
}
</style>
這是一個非?；镜臉邮剑壳斑€可以。
然后，我像以前一樣添加了目錄的 JavaScript，并添加了一個腳本來生成元素屬性表：
;
document.addEventListener('DOMContentLoaded', function () {
let elementInput = document.getElementById('element-input');
讓calculateBtn = document.getElementById('calculate-btn');
讓calculatorOutput = document.getElementById('計算器輸出');
const 元素數(shù)據(jù) = {
“H”：{
“Hfg_298_15K”：-241.8，
“Hfg_0K”：-217.8，
“熵_298_15K”：130.7，
“Integrated_Heat_Capacity_0_to_298_15K”：25.7，
“熱容量_298_15K”：28.8，
“電子能量水平”：[1216.5，1025.7]，
“電離能量”：13.6，
“電子親和力”：0.75
},
“他”： {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：126.1，
“Integrated_Heat_Capacity_0_to_298_15K”：20.8，
“Heat_Capacity_298_15K”：20.8，
"Electronic_Energy_Levels": [159850, 169084, 171133],
“電離能量”：24.6，
“電子親和力”：-0.08
},
“李”：{
“Hfg_298_15K”：159.3，
“Hfg_0K”：155.3，
“熵_298_15K”：29.1，
“Integrated_Heat_Capacity_0_to_298_15K”：22.8，
“熱容量_298_15K”：24.8，
"Electronic_Energy_Levels": [14908, 17159],
“電離能量”：5.39，
“電子親和力”：0.61
},
“是”： {
“Hfg_298_15K”：324.3，
“Hfg_0K”：315.3，
“熵_298_15K”：9.5，
“Integrated_Heat_Capacity_0_to_298_15K”：16.8，
“熱容量_298_15K”：16.7，
“電子能量水平”：[21978, 38178],
“電離能量”：9.32，
“電子親和力”：-0.20
},
“乙”：{
“Hfg_298_15K”：565，
“Hfg_0K”：561.5，
“熵_298_15K”：5.9，
“Integrated_Heat_Capacity_0_to_298_15K”：11.1，
“熱容量_298_15K”：11.1，
"Electronic_Energy_Levels": [38144, 38178],
“電離能量”：8.30，
“電子親和力”：0.28
},
“C”：{
“Hfg_298_15K”：716.7，
“Hfg_0K”：711.2，
“熵_298_15K”：5.7，
“Integrated_Heat_Capacity_0_to_298_15K”：8.5，
“Heat_Capacity_298_15K”：8.5，
"Electronic_Energy_Levels": [10193, 21648],
“電離能量”：11.3，
“電子親和力”：1.26
},
“N”：{
“Hfg_298_15K”：472.7，
“Hfg_0K”：472.7，
“熵_298_15K”：153.3，
“Integrated_Heat_Capacity_0_to_298_15K”：29.1，
“熱容量_298_15K”：29.1，
“電子能量水平”：[19233, 28838],
“電離能量”：14.5，
“電子親和力”：-0.07
},
“O”：{
“Hfg_298_15K”：249.2，
“Hfg_0K”：246.7，
“熵_298_15K”：161.1，
“Integrated_Heat_Capacity_0_to_298_15K”：29.4，
“熱容量_298_15K”：29.4，
"Electronic_Energy_Levels": [15867, 22698],
“電離能量”：13.6，
“電子親和力”：1.46
},
“F”：{
“Hfg_298_15K”：79.4，
“Hfg_0K”：77.2，
“熵_298_15K”：158.8，
“Integrated_Heat_Capacity_0_to_298_15K”：30.2，
“熱容量_298_15K”：30.2，
"Electronic_Energy_Levels": [404, 40889],
“電離能量”：17.4，
“電子親和力”：3.40
},
“氖”：{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：146.3，
“Integrated_Heat_Capacity_0_to_298_15K”：20.8，
“Heat_Capacity_298_15K”：20.8，
"Electronic_Energy_Levels": [134041, 136541, 138892],
“電離能量”：21.6，
“電子親和力”：-0.08
},
“娜”：{
“Hfg_298_15K”：107.3，
“Hfg_0K”：107.7，
“熵_298_15K”：153.7，
“Integrated_Heat_Capacity_0_to_298_15K”：44.4，
“熱容量_298_15K”：44.4，
“Electronic_Energy_Levels”：[16956, 17293],
“電離能量”：5.14，
“電子親和力”：0.54
},
“鎂”：{
“Hfg_298_15K”：147.7，
“Hfg_0K”：146.2，
“熵_298_15K”：32.7，
“Integrated_Heat_Capacity_0_to_298_15K”：24.9，
“熱容量_298_15K”：24.9，
"Electronic_Energy_Levels": [24581, 30994],
“電離能量”：7.65，
“電子親和力”：-0.30
},
“阿爾”：{
“Hfg_298_15K”：324.3，
“Hfg_0K”：324.1，
“熵_298_15K”：28.3，
“Integrated_Heat_Capacity_0_to_298_15K”：24.4，
“熱容量_298_15K”：24.4，
“電子能量水平”：[25057, 33951],
“電離能量”：5.99，
“電子親和力”：0.43
},
“斯”：{
“Hfg_298_15K”：450.0，
“Hfg_0K”：447.6，
“熵_298_15K”：18.8，
“Integrated_Heat_Capacity_0_to_298_15K”：20.2，
“熱容量_298_15K”：20.2，
"Electronic_Energy_Levels": [6209, 14300],
“電離能量”：8.15，
“電子親和力”：1.39
},
“P”：{
“Hfg_298_15K”：314.6，
“Hfg_0K”：314.6，
“熵_298_15K”：163.2，
“Integrated_Heat_Capacity_0_to_298_15K”：27.3，
“熱容量_298_15K”：27.3，
"Electronic_Energy_Levels": [11828, 19553],
“電離能量”：10.5，
“電子親和力”：0.75
},
“S”：{
“Hfg_298_15K”：278.3，
“Hfg_0K”：275.2，
“熵_298_15K”：167.7，
“Integrated_Heat_Capacity_0_to_298_15K”：29.2，
“熱容量_298_15K”：29.2，
"Electronic_Energy_Levels": [21394, 29394],
“電離能量”：10.4，
“電子親和力”：2.08
},
“Cl”：{
“Hfg_298_15K”：121.3，
“Hfg_0K”：119.1，
“熵_298_15K”：165.2，
“Integrated_Heat_Capacity_0_to_298_15K”：33.3，
“熱容量_298_15K”：33.3，
"Electronic_Energy_Levels": [882, 8823],
“電離能量”：13.0，
“電子親和力”：3.62
},
“阿爾”：{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：154.8，
“Integrated_Heat_Capacity_0_to_298_15K”：20.8，
“Heat_Capacity_298_15K”：20.8，
"Electronic_Energy_Levels": [93144, 93751, 95282],
“電離能量”：15.8，
“電子親和力”：-0.08
},
“K”：{
“Hfg_298_15K”：89.2，
“Hfg_0K”：89.2，
“熵_298_15K”：160.3，
“Integrated_Heat_Capacity_0_to_298_15K”：46.2，
“熱容量_298_15K”：46.2，
"Electronic_Energy_Levels": [12985, 13042],
“電離能量”：4.34，
“電子親和力”：0.50
},
“鈣”：{
“Hfg_298_15K”：178.2，
“Hfg_0K”：177.3，
“熵_298_15K”：41.6，
“Integrated_Heat_Capacity_0_to_298_15K”：25.9，
“熱容量_298_15K”：25.9，
"Electronic_Energy_Levels": [15315, 23652],
“電離能量”：6.11，
“電子親和力”：-0.02
},
“Sc”：{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：33.2，
“Integrated_Heat_Capacity_0_to_298_15K”：3.80，
“Heat_Capacity_298_15K”：25.52，
"Electronic_Energy_Levels": [0, 11519.99],
“電離能量”：6.561，
“電子親和力”：0.189
},
“鈦”：{
“Hfg_298_15K”：473.00，
“Hfg_0K”：470.00，
“熵_298_15K”：180.30，
“Integrated_Heat_Capacity_0_to_298_15K”：7.54，
“Heat_Capacity_298_15K”：24.43，
“電子能量水平”：[0、170.132、386.874、6556.833、6598.765、6661.006、6742.756、6842.962、7255.355、8436.618、8492.421、 8602.34],
“電離能量”：6.828，
“電子親和力”：0.087
},
“鈦”：{
“Hfg_298_15K”：473.00，
“Hfg_0K”：470.00，
“熵_298_15K”：180.30，
“Integrated_Heat_Capacity_0_to_298_15K”：7.54，
“Heat_Capacity_298_15K”：24.43，
“電子能量水平”：[0、170.132、386.874、6556.833、6598.765、6661.006、6742.756、6842.962、7255.355、8436.618、8492.421、 8602.34],
“電離能量”：6.828，
“電子親和力”：0.087
},
};
calculateBtn.addEventListener('點擊', function() {
讓 selectedElement = elementInput.value.trim();
if (!selectedElement) {
alert('請輸入元素符號。');
返回;
}讓normalizedElement = selectedElement.charAt(0).toUpperCase() selectedElement.slice(1).toLowerCase();
CalculatorOutput.innerHTML = '<div>
<p>我為計算器添加了很多內(nèi)容，以及動態(tài)生成目錄的邏輯，以及計算每個元素的值的邏輯。諾亞問我是否可以集成基本計算器，計算元素及其共價半徑和鍵長。頁面現(xiàn)已準(zhǔn)備就緒！想看的話就在這里：<br>
元素的周期性 - 注釋</p>
<p>這標(biāo)志著一天的編碼結(jié)束。我知道，感覺有點倉促，因為確實如此。我無法準(zhǔn)確描述我做了什么以及為什么，因為我也不記得其中的大部分內(nèi)容。我只記得基本的變化。</p>
</div>
以上是我從頭開始構(gòu)建了終極教育網(wǎng)站 — 第 3 天的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請聯(lián)系admin@php.cn
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
Agnes Tachyon Build Guide |漂亮的德比志
2 周前
By Jack chen
Oguri Cap Build Guide |漂亮的德比志
2 周前
By Jack chen
峰：如何復(fù)興球員
4 周前
By DDD
Grass Wonder Build Guide |烏瑪媽媽漂亮的德比
1 周前
By Jack chen
峰如何表現(xiàn)
3 周前
By Jack chen
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語言，各自適用于不同的應(yīng)用場景。Java用于大型企業(yè)和移動應(yīng)用開發(fā)，而JavaScript主要用于網(wǎng)頁開發(fā)。
如何在JS中與日期和時間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時間處理需注意以下幾點：1.創(chuàng)建Date對象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時間信息可用get和set方法，注意月份從0開始；3.手動格式化日期需拼接字符串，也可使用第三方庫；4.處理時區(qū)問題建議使用支持時區(qū)的庫，如Luxon。掌握這些要點能有效避免常見錯誤。
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript與Java：開發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
什么是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯誤處理。了解這兩個階段有助于精確控制JavaScript響應(yīng)用戶操作的時機(jī)和方式。
JavaScript：探索用于高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
如何減少JavaScript應(yīng)用程序的有效載荷大??？
Jun 26, 2025 am 12:54 AM
如果JavaScript應(yīng)用加載慢、性能差，問題往往出在payload太大，解決方法包括：1.使用代碼拆分（CodeSplitting），通過React.lazy()或構(gòu)建工具將大bundle拆分為多個小文件，按需加載以減少首次下載量；2.移除未使用的代碼（TreeShaking），利用ES6模塊機(jī)制清除“死代碼”，確保引入的庫支持該特性；3.壓縮和合并資源文件，啟用Gzip/Brotli和Terser壓縮JS，合理合并文件并優(yōu)化靜態(tài)資源；4.替換重型依賴，選用輕量級庫如day.js、fetch
JavaScript模塊上的確定JS綜述：ES模塊與COMPORJS
Jul 02, 2025 am 01:28 AM
ES模塊和CommonJS的主要區(qū)別在于加載方式和使用場景。1.CommonJS是同步加載，適用于Node.js服務(wù)器端環(huán)境；2.ES模塊是異步加載，適用于瀏覽器等網(wǎng)絡(luò)環(huán)境；3.語法上，ES模塊使用import/export，且必須位于頂層作用域，而CommonJS使用require/module.exports，可在運行時動態(tài)調(diào)用；4.CommonJS廣泛用于舊版Node.js及依賴它的庫如Express，ES模塊則適用于現(xiàn)代前端框架和Node.jsv14 ；5.雖然可混合使用，但容易引發(fā)問題
