Emlog博客js夜间模式实现时间段自动判断切换代码 - 易启发资源网

Emlog博客js夜间模式实现时间段自动判断切换代码

作者: 易启发

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

广告位

简介

现在很多app 都已经实现了 夜间模式,这样可以在夜间的时候保护我们的眼睛呢?于是,就有了给自己博客添加夜间模式的想法,花不多说,开始吧。

思路

本质上讲,“夜间模式”就是在指定时间段内修改页面配色、图片亮度等,因此我们把问题拆开为三部分进行分析:

  • 动态修改页面配色、图片亮度
  • 在指定时间段内修改
  • 具体的样式内容

动态修改页面配色、图片亮度 既然提到了动态,就免不了要用到JavaScript了。
我们知道样式有三种书写形式,分别为外联、内联和内嵌。使用JS修改样式,就要从这三个地方入手:

  • 引入一个新的外联CSS文件,以覆盖原有样式  / 不影响原有样式文件、方便维护/
  • 不引入新的CSS,而是在原有CSS上追加样式,以class名区分  / 方便JS操作,实现优雅、方便维护/
  • 在页面中插入style标签,在其中书写样式  / 不增加HTTP连接数、方便维护/
  • 修改元素的style属性,即内嵌样式  / 不推荐/

第四种方法违反了“结构与表现分离的设计思想”,且内嵌样式优先级过高
而且真正实现的话,需要对大量元素编写JS代码,执行效率低下,维护困难,因此一般不作考虑
前三种方法都有其适用场景,在这里选择第二种

以class来区分样式,实现了功能与表现的分离。对于JS代码来说,问题变成了 如何操作元素的class,而不必关心样式的具体表现。

使用JS控制元素class

JS中 Element.classListadd()remove()方法,正好满足我们的需求,且支持绝大多数浏览器(IE10以上支持)
但先别急着写,还有一个细节:夜间模式这个状态应被保存下来一直生效,或持续到本次会话结束, cookie可以满足我们的要求
所以事情就很明朗了,编写代码:

在header.php文件</head>标签结束前插入css代码

.control { z-index: 99999; bottom: 15px; left: 38%; position: absolute; }

在指定时间段内修改

<script type="text/javascript">
			var brightness = 0.5;
			$().ready(function() {
				// 创建遮罩层
				(function createCover() {
					$(document.body).append(
						$('<div/>').attr('id', "divCover")
						.css({
							"display": "none",
							"background": "#000",
							"position": "absolute",
							"left": "0px",
							"top": "0px",
							"width": $(document).width() + 'px',
							"height": $(document).height() + 'px',
							"z-index": "99999",
							"opacity": brightness
						}));
				})();

				var i = setInterval(function() {
					var a = new Date().getHours();
					if(a >= 18 && a <= 23||a >= 0 && a <= 6) {
						clearInterval(i)
						$("#divCover").css("opacity", brightness = 0.5);
						$("#divCover").show();
						alert("18:00-6:00夜间模式暂停访问请休息")
					}else{
						$("#divCover").hide();
					}
				},1000)
		});
</script>

分享到:
打赏
未经允许不得转载:

作者: 易启发, 转载或复制请以 超链接形式 并注明出处 易启发资源网
原文地址: 《Emlog博客js夜间模式实现时间段自动判断切换代码》 发布于2020-3-4
百度[百度已收录] 360[360未收录] 搜狗[搜狗已收录]

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

Emlog博客js夜间模式实现时间段自动判断切换代码

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏