传单暗模式 - Javascript (1)

📌 相关文章

📜 传单暗模式 - Javascript (1)

📅 最后修改于: 2023-12-03 15:22:05.746000 🧑 作者: Mango

传单暗模式 - Javascript

介绍

本文将介绍如何使用Javascript编写传单页面的暗模式效果。传单页面中经常使用较多的背景图和颜色，因此提供一个暗色模式，对用户的视觉体验有很大的帮助。

技术栈

为了实现暗色模式，我们需要使用Javascript和CSS。具体实现方式：

使用Javascript添加一个按钮，可以切换暗模式和白天模式
使用CSS将页面的样式进行修改，将原始颜色替换为暗色调。

代码实现

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>传单暗模式</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- 在head标签里添加这段JS代码，在加载完CSS样式后再加载JS文件 -->
    <script type="text/javascript">
      window.addEventListener('load', function () {
        document.querySelector('#dark-mode-toggle').addEventListener('click', function () {
          var body = document.querySelector('body');
          body.classList.toggle('dark-mode');
        });
      });
    </script>
  </head>
  <body>
    <!-- 添加暗模式开关 -->
    <button id="dark-mode-toggle">切换暗模式</button>
    <h1>传单暗模式页面示例</h1>
    <p>这是一个传单页面</p>
    <div class="wrapper">
      <img src="background.jpg" alt="背景图">
      <p>这里是传单的内容</p>
    </div>
  </body>
</html>

CSS代码：

body {
  background-color: #fff; /* 白天模式背景色 */
}

.dark-mode body {
  background-color: #333; /* 暗模式背景色 */
}

h1 {
  color: #333; /* 白天模式文字颜色 */
}

.dark-mode h1 {
  color: #fff; /* 暗模式文字颜色 */
}

.wrapper {
  background-color: #eee; /* 白天模式内容区域颜色 */
}

.dark-mode .wrapper {
  background-color: #444; /* 暗模式内容区域颜色 */
}

总结

通过添加Javascript代码，并结合CSS实现不同背景色的样式切换，我们可以轻松地实现暗色模式效果，提升用户的浏览体验。除了传单页面，这种暗色模式效果也可以运用在其他的网站页面中。