Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta mod gelap/terang untuk tapak web menggunakan JavaScript/jQuery?

Bagaimana untuk mencipta mod gelap/terang untuk tapak web menggunakan JavaScript/jQuery?

王林ke hadapan: 2023-09-14 22:13:021293semak imbas

如何使用 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(&quot;dark-theme&quot;);
         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!

JavaScript jquery css html 事件算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk memilih semua pautan dalam perenggan menggunakan jQuery?Artikel seterusnya：Bagaimana untuk memilih semua pautan dalam perenggan menggunakan jQuery?

Artikel berkaitan

Lihat lagi