使用HTML、CSS和JavaScript实现夜间模式

已于 2024-08-07 00:02:17 修改
阅读量142 收藏 2
点赞数 3
文章标签： css javascript css3
于 2024-08-06 23:59:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74972192/article/details/140968776
版权

这篇博客展示了如何使用HTML、CSS和JavaScript实现一个简单的夜间模式切换功能。通过点击切换开关，可以在白天模式和夜间模式之间切换，改善用户的阅读体验。

代码解析

1. HTML 头部和样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夜间模式切换</title>
    <style>
        body {
            transition: background-color 0.5s, color 0.5s;
            background-color: white;
            color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        body.dark-mode {
            background-color: black;
            color: white;
        }

        .toggle-switch {
            position: absolute;
            top: 20px;
            right: 50px;
            width: 40px;
            height: 20px;
            border: 2px solid black;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.5s;
        }

        .toggle-knob {
            position: absolute;
            top: 1.5px;
            left: 2px;
            height: 13px;
            width: 13px;
            background-color: black;
            border-radius: 50%;
            transition: all 0.5s;
        }

        body.dark-mode .toggle-switch {
            border-color: white;
        }

        body.dark-mode .toggle-knob {
            left: 24px;
            background-color: white;
        }

        .content {
            text-align: center;
        }
    </style>
</head>

解析:

  • <!DOCTYPE html>: 声明文档类型为HTML5。
  • <html lang="zh-CN">: 设置文档语言为中文。
  • <head>: 包含文档的元数据。
  • <meta charset="UTF-8">: 设置字符编码为UTF-8。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 使页面在移动设备上响应良好。
  • <title>夜间模式切换</title>: 设置页面标题。
  • <style>: 包含页面的CSS样式。
2. HTML 主体和内容

<body id="body">
    <div class="toggle-switch" id="toggleSwitch">
        <div class="toggle-knob" id="toggleKnob"></div>
    </div>
    <div class="content">
        <h1>夜间模式示例</h1>
        <p>这是一个夜间模式切换按钮的示例。</p>
        <h2>新闻示例</h2>
        <p>这是一些示例新闻内容。</p>
        <p>新闻1: 这是第一条新闻的内容。</p>
        <p>新闻2: 这是第二条新闻的内容。</p>
        <p>新闻3: 这是第三条新闻的内容。</p>
    </div>

解析:

  • <body id="body">: 定义文档的主体部分，并设置ID为body。
  • <div class="toggle-switch" id="toggleSwitch">: 定义一个切换开关的容器，并设置ID为toggleSwitch。
  • <div class="toggle-knob" id="toggleKnob"></div>: 定义切换开关的按钮，并设置ID为toggleKnob。
  • <div class="content">: 定义内容区域。
  • <h1>, <h2>, <p>: 定义标题和段落内容。
3. JavaScript 代码
   <script>
        document.getElementById('toggleSwitch').addEventListener('click', function() {
            document.body.classList.toggle('dark-mode');
        });
    </script>
</body>
</html>

解析:

  • <script>: 包含JavaScript代码。
  • document.getElementById('toggleSwitch').addEventListener('click', function() { ... });: 为切换开关添加点击事件监听器。
  • document.body.classList.toggle('dark-mode');: 切换body元素的dark-mode类，实现夜间模式的切换。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夜间模式切换</title>
    <style>
        body {
            transition: background-color 0.5s, color 0.5s;
            background-color: white;
            color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        body.dark-mode {
            background-color: black;
            color: white;
        }

        .toggle-switch {
            position: absolute;
            top: 20px;
            right: 50px;
            width: 40px;
            height: 20px;
            border: 2px solid black;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.5s;
        }

        .toggle-knob {
            position: absolute;
            top: 1.5px;
            left: 2px;
            height: 13px;
            width: 13px;
            background-color: black;
            border-radius: 50%;
            transition: all 0.5s;
        }

        body.dark-mode .toggle-switch {
            border-color: white;
        }

        body.dark-mode .toggle-knob {
            left: 24px;
            background-color: white;
        }

        .content {
            text-align: center;
        }
    </style>
</head>
<body id="body">
    <div class="toggle-switch" id="toggleSwitch">
        <div class="toggle-knob" id="toggleKnob"></div>
    </div>
    <div class="content">
        <h1>夜间模式示例</h1>
        <p>这是一个夜间模式切换按钮的示例。</p>
        <h2>新闻示例</h2>
        <p>这是一些示例新闻内容。</p>
        <p>新闻1: 这是第一条新闻的内容。</p>
        <p>新闻2: 这是第二条新闻的内容。</p>
        <p>新闻3: 这是第三条新闻的内容。</p>
    </div>
    <script>
        document.getElementById('toggleSwitch').addEventListener('click', function() {
            document.body.classList.toggle('dark-mode');
        });
    </script>
</body>
</html>

运行结果

点击页面右上角的切换开关，可以在白天模式和夜间模式之间切换。页面的背景颜色和文字颜色会随之变化。

结论

通过这个示例，我们学习了如何使用HTML、CSS和JavaScript实现一个简单的夜间模式切换功能。通过点击切换开关，可以在白天模式和夜间模式之间切换，改善用户的阅读体验。

扩展

  1. 本地存储：可以使用浏览器的本地存储（localStorage）来记住用户的模式选择，即使刷新页面也能保持夜间模式或白天模式。
  2. 更多样式：可以进一步扩展样式，例如改变链接颜色、按钮样式等，以适应夜间模式。
  3. 动画效果：可以添加更多的动画效果，使切换过程更加平滑和有趣。

相关类型扩展

  1. 主题切换：除了夜间模式，还可以实现其他主题的切换，例如高对比度模式、色盲模式等，以提高网页的可访问性。
  2. 响应式设计：结合媒体查询（media queries），使夜间模式在不同设备上都有良好的表现。
  3. 用户偏好检测：使用CSS的prefers-color-scheme媒体特性，自动检测用户的系统主题偏好，并相应地应用夜间模式或白天模式。

       爬虫项目推荐

    其他项目推荐

总结

通过这个示例，我们学习了如何使用CSS进行样式切换，如何使用JavaScript添加事件监听器，以及如何通过DOM操作实现动态效果。希望这个示例对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时告诉我。

LIY若依
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript应用——实现页面简单的日间/夜间模式切换
沐北的博客
12-30 1305
预览效果 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
html 黑夜模式,使用javascript为网页增加夜间模式
weixin_42099116的博客
06-05 687
HTML+CSS:.cover{position:fixed;top: 0px;left: 0px;outline:5000px solid rgba(0, 0, 0, 0.3);z-index: 99999;}接着用JavaScript写个夜间模式plus:var brightness;//显示遮罩function cover(brightness) {if (typeof(div) == 'u...
使用javascript为网页增加夜间模式
qq32967的博客
03-13 3091
javascipt夜间模式
CSS实现白天/夜晚模式切换
Blog of Leviash
08-28 1873
在网页设计和用户体验中，模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案，以适应其个人偏好或特定环境。在这篇博客中，我们将探索如何使用纯CSS实现一个简单的模式切换效果，无需依赖JavaScript的运行。使用纯CSS实现模式切换功能的好处之一是它可以提供更好的性能，尤其是在移动设备上。纯CSS解决方案能够充分利用浏览器的硬件加速，并避免了JavaScript引擎的运行开销。此外，纯CSS实现还能简化代码结构，减少对外部脚本的依赖。
html 黑夜模式,JavaScript_使用javascript为网页增加夜间模式，HTML+CSS:复制代码 代码如下:<d - phpStudy...
weixin_34991792的博客
06-05 311
使用javascript为网页增加夜间模式HTML+CSS:.cover{position:fixed;top: 0px;left: 0px;outline:5000px solid rgba(0, 0, 0, 0.3);z-index: 99999;}接着用JavaScript写个夜间模式plus:var brightness;//显示遮罩function cover(brightness) {...
HTML+CSS+JS 简单应用小案例
Emperor10的博客
02-22 2973
猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
通过css注入实现的android webview的夜间模式
shuishuixiaoping的专栏
08-15 3481
一开始，产品跟我确认是否能够实现uc的夜间模式，我回答，当然可以，uc可以，我们也可以。 但是后来发现不是酱紫的，找了很多方法都不能做到uc那样，最后找到一些方法就是webview调用js、 当然，这个方案也不能做到像uc那样完美，但相对来说，勉勉强强，应该比调节亮度的应该要好些 原理就是在webview的加载结束，调用css代码，改变html页面的背景色、文字颜色、边框颜色等。
android webview夜间模式javascript代码
OldGoldenFox的专栏
09-01 1349
android webview夜间模式javascript代码 修改Background属性 修改Background-Color属性 利用invert属性翻转网页颜色 CSS代码
用HTML、CSS和JavaScript实现鼠标可交互的3D太阳和月亮切换效果
weixin_43263566的博客
05-30 1638
用HTML、CSS和JavaScript实现鼠标可交互的3D太阳和月亮切换效果
通过css注入实现android webview的夜间模式
08-15
而实现夜间模式是现代应用中常见的需求，特别是在保护用户视力和节省电池方面。本篇将详细介绍如何利用CSS注入来实现在Android Webview中切换到夜间模式。 首先，我们需要理解CSS注入的概念。CSS（Cascading Style ...
ModoNoche.css:带有CSS的黑暗或夜间模式HTML切换按钮
05-02
"ModoNoche.css:带有CSS的黑暗或夜间模式HTML切换按钮"是一个关于如何使用CSS和HTML实现这一功能的示例。这个项目的核心在于创建一个用户可以轻松切换的按钮，它可以在亮色主题和暗色主题之间进行切换。 首先，我们...
Calculator:使用HTML，CSS和JavaScript构建的计算器应用程序，该应用程序还具有深色模式
04-30
在这个项目中，我们正在讨论一个使用HTML、CSS和JavaScript构建的计算器应用程序，它还具有深色模式的功能。这个计算器不仅提供了基本的计算功能，还注重用户体验，特别是在夜间或低光环境下的视觉舒适度。让我们...
前端面试宝典【CSS篇】【5】
最新发布
BDawn的专栏
08-06 32
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 107
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
CSS：图片间空白间距问题的解决方案
q1003675852的博客
08-02 836
本文主要记录CSS：图片间空白间距问题的解决方案，特别是针对iphone 14 pro设备的新情况进行测试处理。
【Dash】使用 HTML 和 CSS 创建图表
持续更新中...
08-03 1005
【代码】【Dash】使用 HTML 和 CSS 创建图表。
javascript夜间模式
05-22
实现夜间模式可以通过以下两种方式： 1. 使用CSS 可以使用CSS中的 `:root` 和 `:not` 选择器以及 `var()` 函数来实现夜间模式。首先，定义两个不同的CSS变量，分别表示白天和夜间的颜色，如下所示： ```css :root { --bg-color: #fff; /* 白天背景颜色 */ --text-color: #333; /* 白天文字颜色 */ } :not(.night-mode) { background-color: var(--bg-color); color: var(--text-color); } .night-mode { --bg-color: #222; /* 夜间背景颜色 */ --text-color: #ccc; /* 夜间文字颜色 */ } ``` 然后，在HTML中添加一个按钮，用于切换夜间模式： ```html <button onclick="toggleNightMode()">夜间模式</button> ``` 最后，在JavaScript中实现 `toggleNightMode()` 函数，用于切换夜间模式： ```javascript function toggleNightMode() { document.body.classList.toggle('night-mode'); } ``` 这样，当用户点击按钮时，`night-mode` 类会被添加到 `body` 元素上，从而切换到夜间模式。 2. 使用JavaScript 可以使用JavaScript来动态修改CSS样式，实现夜间模式。首先，定义白天和夜间的颜色： ```css body { background-color: #fff; /* 白天背景颜色 */ color: #333; /* 白天文字颜色 */ } .night-mode body { background-color: #222; /* 夜间背景颜色 */ color: #ccc; /* 夜间文字颜色 */ } ``` 然后，在HTML中添加一个按钮，用于切换夜间模式： ```html <button onclick="toggleNightMode()">夜间模式</button> ``` 最后，在JavaScript中实现 `toggleNightMode()` 函数，用于切换夜间模式： ```javascript function toggleNightMode() { document.body.classList.toggle('night-mode'); } ``` 这样，当用户点击按钮时，`night-mode` 类会被添加到 `body` 元素上，从而切换到夜间模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LIY若依

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值