网页点击切换黑白昼夜模式

网页点击切换黑白昼夜模式并且刷新也不会恢复到初始模式

点击后会在body加一个class属性自己写css代码就行了

HTML

<input id="darkButton" type="checkbox" class="checkbox">

js代码

$('#darkButton').change(function () {if ($(this).is(":checked")) {$('body').addClass('dark');localStorage.setItem('body', 'dark');} else {$('body').removeClass('dark');localStorage.setItem('body', '');}
});$("body").attr("class", localStorage.getItem('body'));
localStorage.getItem('body') ? $('#darkButton').attr('checked', true) : '';

第二种

<div class="theme-switch-wrapper"><label class="theme-switch" for="checkbox"><input type="checkbox" id="checkbox"><div class="slider round"></div></label>
</div>

js代码

 /* -----------------------------------dark-mode----------------------------------- */const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');const logoDark = document.querySelector('.logo-dark');const logoWhite = document.querySelector('.logo-white');const currentTheme = localStorage.getItem('theme');if (currentTheme) {document.documentElement.setAttribute('data-theme', currentTheme);if (currentTheme === 'dark') {toggleSwitch.checked = true;document.body.classList.toggle("dark");logoDark.classList.add('display-none');logoWhite.classList.add('display-block'); }}function switchTheme(e) {if (e.target.checked) {document.documentElement.setAttribute('data-theme', 'dark');localStorage.setItem('theme', 'dark');document.body.classList.add('dark');logoDark.classList.add('display-none');logoWhite.classList.add('display-block');  }else {document.documentElement.setAttribute('data-theme', 'light');localStorage.setItem('theme', 'light');document.body.classList.remove('dark');logoDark.classList.remove('display-none');logoWhite.classList.remove('display-block');}}toggleSwitch.addEventListener('change', switchTheme, false);

网页点击切换黑白昼夜模式相关推荐

linux浏览器切换内核,电脑切换浏览器内核模式浏览网页的详细方法
众所周知,目前很多流行的浏览器都支持双核浏览模式.在国内大多数的网上银行和支付系统只支持IE的Trident内核,所以在访问支付宝或者网上银行的时候,使用Trident内核的"IE兼容模式& ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
Edge使用手机版切换到电脑模式的方法
edge浏览器是一个很方便的搜索浏览软件,很多用户都会使用这款软件的手机版进行使用,手机版使用更加的方便,移动化的搜索服务,可以为用户的生活带来更便捷的生活,但是有的时候,在搜索的时候会需要将浏览模式 ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...
js实现点击切换checkbox背景图片
转载自:http://www.bijishequ.com/detail/384166?p= 首页专题博客文章登录注册 www.bijishequ.com 搜索笔记社区共收录522,437篇 ...
android 分屏切换流程,一种切换分屏模式和多窗口模式的方法与流程
本发明涉及一种切换分屏模式和多窗口模式的方法,适用于常见的带有触摸的电子设备,包括但不限于在系统的用户界面中使用触摸的方法进行导航的电子设备. 背景技术: 分屏模式是一种将两个应用扩充到全屏幕的交互方 ...
html checkbox复选框更换背景,js实现点击切换checkbox背景图片的简单实例
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码图片背景为白色表示未勾选状态 ,背景 ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
Vue改变网页背景颜色切换
今天给大家分享一个好看的网页背景颜色切换的html文件功能支持: 1.点击默认主题内容区域切换对应颜色,包括文字背景和文字颜色 2.在动态颜色中可以选择自己喜欢的颜色动态切换实现代码: <! ...

网页点击切换黑白昼夜模式

网页点击切换黑白昼夜模式相关推荐

最新文章

热门文章