Rumah >hujung hadapan web >tutorial js >Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 4
Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 4
- Susan Sarandonasal
- 2025-01-14 09:16:41474semak imbas
Pada hari ke-3, kami mengusahakan kandungan itu sendiri, yang diperlukan untuk mana-mana tapak web. Ia mungkin berasa pelik untuk memanggil ini sebagai Hari 4, kerana secara teknikal ia adalah hari ke-6.
Ya, saya tahu bunyinya pelik, tetapi pada hari Sabtu dan Ahad, saya tidak bekerja. Saya menghabiskan masa bersama keluarga dan berehat, bukannya bekerja. Perlu diingat, sebagai pembangun, adalah penting untuk mengekalkan keseimbangan kehidupan kerja.
Hari ini saya akan membangunkan, Kalkulator Radii Kovalen. Ini adalah cadangan yang diberikan oleh Noah Kleij, pada Hari 3, dan saya telah melaksanakan versi asasnya pada hari itu sahaja, tetapi, hari ini saya akan membuat halaman khusus untuknya di dalam direktori Chemistry/3/covalent-radii- and-bond-length.html. Tiada kalkulator jejari kovalen di pasaran, sekurang-kurangnya tidak boleh dicari di Google.
Baiklah, sekarang mari kita berusaha mencipta halaman kalkulator.
Jam 22: Menambah Kalkulator
Saya akan mencipta fail covalent-radii-and-bond-length.html di dalam direktori Chemistry/3/. Halaman ini akan memasukkan Kalkulator Radii Kovalen yang kami kerjakan semalam.
<!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>
Ini mempunyai HTML asas biasa, tetapi saya sengaja mengekalkannya minimum untuk halaman ini.
Sekarang, mari salin teks, dan juga kalkulator, dan lihat sama ada semuanya berfungsi. Saya telah menulis perihalan menggunakan ChatGPT beberapa kali, kerana ia tidak akan membunuh sekali gus mengambil banyak masa untuk menggesanya.
<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>
Ini akan mengendalikan penggayaan untuk keseluruhan halaman kandungan, dengan kalkulator dan kandungan utama. Berbeza daripada yang sebelumnya, pada ini mempunyai tema gelap untuk kandungan dan bar navigasi untuk tapak di sebelah kanan. Sebagai seorang, mencari dengan tujuan "Kalkulator Radii Kovalen", mereka mahukan kalkulator, melakukan pengiraan tertentu dan kemudian meninggalkan tapak tersebut. Mereka adalah yang utama, yang mempunyai masa untuk benar-benar menavigasi tapak.
Biasanya pelajar yang mengikuti pengajian peringkat tinggi dalam Kimia, cari istilah ini. Jadi, adalah baik untuk tidak membuang masa mereka. Dan kami memang menyimpan navigasi, hanya mengalihkannya ke arah kanan pada desktop dan ke arah bawah pada mudah alih. Kami hanya terus menunjukkan kepada mereka kalkulator, dan tidak membuang masa mereka, melihat navigasi. Hanya memberi mereka apa yang mereka mahu. Ingat: Memadankan Niat Carian hendaklah menjadi keutamaan anda. Jika tidak, ia tidak akan dipromosikan oleh mana-mana Enjin Carian.
Akhir sekali, mari tambah javascript, ini mengandungi logik untuk kalkulator, dan mengemas kini svg, yang kini tersedia untuk beberapa molekul sahaja, kerana saya tidak mempunyai masa mahupun kemahiran SVG:
<skrip>
document.addEventListener('DOMContentLoaded', fungsi () {
biarkan moleculeInput = document.getElementById('molekul-input');
biarkan hitungBtn = document.getElementById('calculate-btn-56');
biarkan calculatorOutput = document.getElementById('calculator-output-56');
biarkan moleculeSvgContainer = document.getElementById('molekul-svg-bekas');
const covalentRadii = {
'H': 31, 'Dia': 28, 'Li': 128, 'Be': 96, 'B': 84, 'C': 73, 'N': 71, 'O': 66, 'F ': 57, 'Ne': 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
};
keelektronegatifan const = {
'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,
'Mg': 1.31, 'Al': 1.61, 'Si': 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
};
fungsi parseMolekul(formula) {
const regex = /([A-Z][a-z]*)(d*)/g;
biarkan padan;
elemen const = {};
manakala ((perlawanan = regex.exec(formula)) !== null) {
elemen const = padanan[1];
const count = parseInt(match[2] || 1, 10);
elemen[elemen] = (elemen[elemen] || 0) kiraan;
}
kembali elemen;
}
function calculateBondLengths(molekul) {
unsur const = parseMolecule(molekul);
const elementSymbols = Object.keys(elements);
keputusan const = [];
bon const = [];
const radiiInfo = [];
//Mula-mula tambahkan jejari kovalen atom-atom yang berbeza kepada hasilnya.
untuk (elemen const elemenSymbols) {
jika (covalentRadii[elemen]) {
radiiInfo.push({
unsur: unsur,
jejari: kovalenRadii[unsur]
});
}
}
untuk (biar i = 0; i < elementSymbols.length; i ) {
untuk (biar j = i 1; j < elementSymbols.length; j ) {
elemen constA = elemenSimbol[i];
const elementB = elementSymbols[j];
jika (covalentRadii[elemen A] && kovalenRadii[elemenB] && elektronegativiti[elemenA] && elektronegativiti[elemenB]) {
const rA = kovalenRadii[unsurA];
const rB = kovalenRadii[elemenB];
const deltaChi = Math.abs(elektronegativiti[elemen A] - elektronegativiti[elemenB]);
panjang ikatan const = rA rB - 9 * deltaChi;
const bondData = {
bon: `${elemenA}-${elemenB}`,
bondLength: bondLength.toFixed(2),
};
bonds.push(bondData);
}
}
}
if (bons.length === 0 && radiiInfo.length === 0) {
pulangan hasil; //Tiada pengiraan yang perlu dilakukan.
}
if (radiiInfo.length > 0) {
results.push({
radiiData: radiiInfo,
jenis: "covalentRadius"
});
}
if (bons.length > 0) {
bonds.forEach(bon => {
results.push({
ikatan: ikatan.ikatan,
bondLength: bond.bondLength,
jenis: "bondLength"
});
});
}
pulangan hasil;
}
calculateBtn.addEventListener('klik', fungsi () {
molekul const = moleculeInput.value.trim();
jika (!molekul) {
alert('Sila masukkan molekul.');
kembali;
}
calculatorOutput.innerHTML = '<div>
Atas ialah kandungan terperinci Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
JavaScript html Object NULL if count for while foreach include Directory math const using Length Regex finally copy function this innerHTML alert input li chatgpt ar everything
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Menguasai Pesanan Import dalam React: Menyelam Dalam Amalan dan Alat TerbaikArtikel seterusnya：Menguasai Pesanan Import dalam React: Menyelam Dalam Amalan dan Alat Terbaik
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional