JavaScript实现单标签下的日间/黑夜模式切换按钮效果

最新推荐文章于 2025-05-02 11:24:01 发布

碧海蓝天·

最新推荐文章于 2025-05-02 11:24:01 发布

阅读量304

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/debug_bug142/article/details/133111065

JavaScript 专栏收录该内容

306 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍如何使用JavaScript、HTML和CSS在单标签下创建日间/黑夜模式切换按钮。通过获取元素引用，添加点击事件监听器，并使用classList.toggle切换样式，实现模式切换效果，提升用户体验。

在网站开发中，为用户提供日间和黑夜模式切换功能是一种常见的需求。本文将介绍如何使用JavaScript实现在单标签下切换日间和黑夜模式的按钮效果。我们将使用HTML、CSS和JavaScript来实现这一功能。

首先，我们需要创建一个简单的HTML结构，包含一个切换按钮和一个需要改变样式的标签。HTML代码如下所示：

<!DOCTYPE html>
<html>
<head>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

碧海蓝天·

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

小程序主题切换实现：白天_黑夜模式开发指南

小程序开发

06-11

645

如今，越来越多的用户希望在使用小程序时能够根据环境和个人喜好切换主题，比如在白天使用明亮的界面，晚上则切换到柔和的黑夜模式，以减少眼睛疲劳。本文的目的就是教大家如何在小程序中实现这样的白天/黑夜模式切换功能。范围涵盖了从小程序开发的基础概念到具体代码实现的全过程。本文首先会介绍与主题切换相关的核心概念，包括主题模式、样式管理等。接着会讲解实现主题切换的核心算法原理和具体操作步骤，还会涉及到相关的数学模型和公式（虽然在主题切换中数学模型相对简单，但也会做一定介绍）。

3D版昼夜切换按钮，原生写法，开箱即用

05-31

3D版昼夜切换按钮，原生写法，开箱即用

参与评论您还未登录，请先登录后发表或查看评论

Day-night-toggle-button：一键切换白天与黑夜，体验视觉新感受

gitblog_00188的博客

03-28

333

Day-night-toggle-button：一键切换白天与黑夜，体验视觉新感受在数字化时代，屏幕几乎成了我们生活的必需品。无论是在工作还是休闲中，屏幕的使用时长都日益增加。为此，一个能够根据时间自动切换白天和黑夜模式的按钮应运而生——Day-night-toggle-button。项目介绍 Day-night-toggle-button 是一个开源项目，旨在帮助用户在白天与黑夜之间轻松切换...

使用javascript为网页增加夜间模式

qq32967的博客

03-13

3249

javascipt夜间模式

使用WPF创建昼夜主题切换按钮

寒冰屋的专栏

05-09

550

ThemeSwitch控件是基于WPF ToggleButton的可自定义控件，具有三种类型的动画，可作为NuGet包使用，并附带用于源代码和说明的GitHub存储库，旨在向WPF应用程序添加引人入胜的视觉元素。

next.js实现根据设备切换暗黑模式的两种方式

Dahui_program的博客

06-27

1186

之后在js中通过window.matchMedia查询prefers-color-scheme: dark并监听属性变化，如果命中则为暗黑模式。样式的改变通过styled-components的theme实现，具体看styled-components的官方文档。引入next-theme，包裹一层插件提供的provider，在组件中使用useTheme获取当前模式。组件库使用的是styled-components。首先要声明支持light和dark两种模式。

JavaScript应用——实现页面简单的日间/夜间模式切换

沐北的博客

12-30

1498

预览效果源代码 <!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"> <

js网页换肤，白天/黑夜模式调换

07-22

下面将详细介绍如何使用JavaScript实现网页换肤，包括白天/黑夜模式的切换。首先，我们需要准备两套CSS样式表，一套用于日间模式，另一套用于夜间模式。日间模式的CSS可能具有明亮的背景色和高对比度的文字，而...

博客美化——页面白天黑夜切换

12-30

在网页设计中，提供一种日间模式和夜间模式的切换功能已经成为越来越常见的需求，这能够为用户带来更好的浏览体验，特别是在光线不足或者用户个人偏好暗色界面的情况下。本主题主要探讨的是如何通过HTML来实现这样的...

js 实现夜间模式

书写人生

03-11

3976

<a href="JavaScript:void(0);" id='black1'>夜间模式</a> <script> $("#black1").click(function(){ var s = $(this).html(); if (s=="夜间模式") { $('body').css("background-color","black"...

three.js昼夜切换，白天黑夜的实现（含源码）

u012148903的博客

03-27

1775

加载三维场景模型，动态过渡至白天到黑夜，黑夜到白天，模拟虚拟世界。

HTML白天模式、夜晚模式切换

m0_67499569的博客

05-18

2709

请注意，上述示例只是一个简单的实现方式，实际中可能需要更多的CSS样式和JavaScript逻辑来实现更复杂的主题切换效果。在web网页中实现白天和夜晚模式的互相转换可以通过使用CSS和JavaScript来完成。当用户点击切换按钮时，JavaScript会根据当前的样式表切换为另一个样式表，从而实现白天和夜晚模式的互相转换。创建两个CSS样式表，一个用于白天模式，一个用于夜晚模式。属性值来判断当前使用的样式表，然后根据当前样式表的状态切换到另一个样式表。中定义白天模式下的样式，包括背景色、文字颜色等。

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

m0_74972192的博客

08-06

1120

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

使用 10 行 JavaScript 代码实现基于用户操作系统偏好的明暗主题

weixin_46977247的博客

08-25

816

在当今的 Web 开发中，为用户提供个性化体验已成为一种标准做法。其中一个流行的趋势就是支持暗模式，在这篇文章中，我们将介绍如何使用简单的 JavaScript 代码和 CSS 来实现明暗模式的切换

网站简单实现白天黑夜两种界面效果--2024计算机毕业设计

毕业设计大牛哥

12-13

665

在JavaScript中，你可以根据当前的时间来判断是白天还是黑夜，并动态地应用相应的CSS类。在HTML中，你可以包含以上JavaScript代码，并将其放置在标签的末尾或页面加载完毕后执行。这样，当页面加载时，就会根据当前时间自动应用白天或黑夜的主题样式。请注意，以上代码只是一个简单的示例，你可以根据自己的需求进行修改和扩展。另外，为了确保在不同浏览器中的兼容性，你可能需要对代码进行一些调整。要在网站实现白天和黑夜两种界面效果，你可以使用JavaScript和CSS来实现。// 调用函数，应用主题。

dom innerwidth innerheight （窗口大小事件）

qq_45827064的博客

05-19

420

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do

【前端】白天/黑夜主题切换：JS读取XML预设主题实现黑白主题切换

萌狼蓝天の技术栈

09-17

432

上扩展实现多主题选择，切换主题) 先看一下XML文档 id值不能重复，一套主题的name要相同，亮色type1，暗色type0 <?xml version="1.0" encoding="UTF-8" ?> <themes> <theme id="0" type="1" name="default"> <name>默认主题(白)</...

打造炫酷的白天/黑夜切换按钮：前端实现方案整理