hujung hadapan web
tutorial js
Bagaimana untuk mencipta mod gelap/terang untuk tapak web menggunakan JavaScript/jQuery?
Bagaimana untuk mencipta mod gelap/terang untuk tapak web menggunakan JavaScript/jQuery?
Mod gelap sangat penting untuk mana-mana tapak web. Pengguna yang mempunyai minat yang berbeza melawati tapak web. Sesetengah orang suka mod gelap dan sesetengah orang suka mod cahaya.
Menurut tinjauan, kira-kira 70% hingga 80% orang lebih suka mod gelap dan hanya 20% hingga 30% lebih suka mod terang. Oleh itu, adalah perlu untuk mencipta mod gelap untuk mana-mana tapak web yang membolehkan pengguna bertukar antara mod gelap dan terang.
Di bawah, kami akan membuat halaman web ringkas menggunakan HTML, CSS dan JavaScript. Selain itu, kami akan belajar untuk melaksanakan mod terang dan gelap menggunakan JavaScript dan CSS.
tatabahasa
Pengguna boleh bertukar antara tema gelap dan terang dengan mengikut sintaks berikut.
body.classList.toggle("dark-theme");
Dalam sintaks di atas, kami lulus nama kelas tema gelap sebagai parameter kaedah togol. Ia menambah dan mengalih keluar kelas daripada elemen HTML tertentu.
Algoritma
Pengguna boleh bertukar antara tema gelap dan terang mengikut algoritma berikut.
Langkah 1 - Tulis kod HTML untuk halaman web dan gunakan CSS seperti biasa untuk tema ringan.
Langkah 2 - Gunakan CSS untuk mencipta gaya untuk tema gelap.
Langkah 3 - Buat butang dan tambah acara onclick pada butang. Apabila pengguna mengklik butang, ia harus bertukar-tukar antara tema gelap dan terang.
Langkah 4 - Untuk bertukar antara tema gelap dan terang, kami boleh menambah dan mengalih keluar kelas tertentu daripada elemen. Contohnya, buat kelas untuk tema gelap dan buat CSS untuk tema gelap. Apabila kami menambah kelas tema gelap dalam badan, tema gelap harus digunakan pada keseluruhan tapak web dan apabila kami mengalih keluarnya, ia sepatutnya biasa.
Contoh 1
Dalam contoh di bawah, apabila pengguna mengklik butang, kami memanggil fungsi changeMode(). Fungsi changeMode() menukar teks butang mengikut tema.
Selain itu, kami menggunakan document.body untuk mengakses keseluruhan halaman web dan menggunakan JavaScript untuk menambah kelas tema gelap pada keseluruhan halaman web untuk menukar tema kepada mod gelap.
Using the toggle method to toggle between light and dark mode in JavaScript.
This is the content of the webpage.
<script> function changeMode() { var body = document.body; // toggle the theme body.classList.toggle("dark-theme"); let button = document.getElementById('button'); // change the button text if (button.innerHTML == "Dark Mode") { button.innerHTML = "Normal Mode"; } else { button.innerHTML = "Dark Mode" } } </script>
Contoh 2
Dalam contoh di bawah, kami telah mencipta butang togol menggunakan HTML dan CSS. Kami menggunakan kotak pilihan untuk suis togol. Oleh itu, apabila pengguna menyemak kotak pilihan, suis dihidupkan. Jadi kita boleh menambah dan mengalih keluar kelas untuk tema gelap bergantung pada sama ada kotak semak ditandakan atau tidak.
Selain itu, kami juga menggunakan kaedah addClass() dan removeClass() JQuery untuk menambah dan mengalih keluar kelas dalam badan.
<html>
<head>
<style>
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
justify-content: center;
}
.dark-class {
color: white;
background-color: rgb(12, 10, 10);
}
p {
font-size: 1.2rem;
}
.toggleButton {
width: 5rem;
height: 2rem;
position: relative;
display: inline-block;
}
.toggleButton input {
opacity: 0;
}
.roundButton {
background-color: black;
top: 0;
left: 0;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
.roundButton:before {
left: 0;
bottom: 0;
position: absolute;
content: "";
background-color: grey;
transition: 1s;
height: 2rem;
width: 2rem;
}
input:checked+.roundButton {
background-color: white;
}
input:checked+.roundButton:before {
transform: translateX(3rem);
}
.roundButton.circle {
border-radius: 2rem;
}
.roundButton.circle:before {
border-radius: 50%;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
</head>
<body>
<h2>Using the <i> JQuery </i> to toggle between light and dark modes in JavaScript.</h2>
<p>This is the content of the webpage.</p>
<label class = "toggleButton">
<input type = "checkbox" id = "toggle">
<div class = "roundButton circle" ></div>
</label>
<script>
// If the input checkbox is checked, activate dark mode by adding dark-class to the body
$('#toggle').change(() => {
if ($('#toggle').is(":checked")) {
$("body").addClass("dark-class");
} else {
$("body").removeClass("dark-class")
}
})
</script>
</body>
</html>Kami belajar menukar antara mod gelap dan mod terang menggunakan JavaScript dan JQuery. Kita perlu menukar CSS halaman web dan menggunakan CSS pada tema gelap. Kami boleh menggunakan CSS pada mod gelap dengan menambah dan mengalih keluar kelas daripada halaman web.
Atas ialah kandungan terperinci Bagaimana untuk mencipta mod gelap/terang untuk tapak web menggunakan JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
Adakah JavaScript sukar belajar?
Apr 03, 2025 am 12:20 AM
Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.
Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end?
Apr 04, 2025 pm 02:06 PM
Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...
