之前在别人的主题上看见过这个功能,第一感觉还不错,于是自己花了点时间写了一个出来。
如何实现?
给页面 css 链接设置一个 id,如:
| <link rel="stylesheet" type="text/css" href="css/1.css" id="css"> |
使用new Date().getHours()函数获取当前系统时间,设置 if 条件语句,如果时间等于或在某个范围内,就使页面调用不同的 css 文件,从而使外观样式发生改变。
| if (t >= 22 && t <= 6 || t === 22) |
这里的 t 是当前时间(小时),如果时间在晚上十点到早上六点直接,便调用夜间主题 css。
码
| <script> | |
| function time(){ | |
| var t = new Date().getHours(); | |
| if (t >= 22 && t <= 6 || t === 22){ | |
| var obj = document.getElementById("css"); | |
| obj.setAttribute("href","2.css"); | |
| } | |
| } | |
| </script> |
本文首发于:js 实现根据时间切换夜间模式-猫饭
《js 实现根据时间切换夜间模式》留言数:0