白天都无人问津的破网站，真的还有人晚上来吗?
- 点击按钮切换模式
其实实现原理很简单:
点击checkbox的时候，为body新增（或移除）名为night的class，
然后在css的night.class里加入夜间模式的代码。
//利用classList.add函数给body新增一个class
//js部分
...
function {
checkbox=document.getElementById("checkbox")
if(!checkbox.checked){
document.body.classList.add('night');
console.log('夜间模式开启啦');
checkbox.checked=true;
}else{
document.body.classList.remove('night');
console.log('夜间模式关闭啦');
checkbox.checked.checked=false;
}
}
...
//css部分
...
body.night{
background: rgba(3,3,3,0.7) no-repeat fixed center;
color: $night_color;//更改颜色
}
...
//为了切换更平滑，在body中加入transition
...
body{
background: rgba(233, 233, 233, 0.9) no-repeat fixed center;
background-size: cover;
transition: background-color 0.6s;
color:$day_color
}
...
- 根据时间自动切换
加入一个简单的判定，让夜间模式自动切换。
if(new Date().getHours() >=22 || new Date().getHours() <= 6){
document.body.classList.add('night');
console.log('夜间模式已开启，夜深啦，早点休息');
box.checked=true;
}else{
document.body.classList.remove('night');
console.log('夜间模式已关闭');
box.checked=false;
}
- 加入cookie
虽然是晚上，但是我就喜欢日间模式呀，为什么我明明关了夜间模式了，下一个页面又给我自动打开了！
这种情况不用怕，cookie轻松解决它。
//新增一个cookie，如果night=1，则开启夜间模式，否则关闭。
//因为cookie缓存在本地，所以即使点开新的网页设定也不会改变。
...
//这部分是页面加载时的自动判定代码
...
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '')//如果cookie不存在，则按照时间判定，并且将此时的状态写入cookie
{
if(new Date().getHours() >=22 || new Date().getHours() <= 6){
document.body.classList.add('night');
document.cookie = "night=1;path=/;SameSite=Strict";
console.log('夜间模式已开启，夜深啦，早点休息');
box.checked=true;
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/;SameSite=Strict";
console.log('夜间模式已关闭');
box.checked=false;
}
}
else//如果cookie存在，则按照cookie中的设定切换夜间模式
{
let judge = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if (judge == '0') {
document.body.classList.remove('night');
console.log('cookie_Night_Mode:OFF');
box.checked=false;
} else if (judge == '1') {
document.body.classList.add('night');
console.log('cookie_Night_Mode:ON');
box.checked=true;
console.log(box.checked);
}
}
...
//手动切换代码同样，切换之后加入cookie记录当前状态
//此时可以用cookie作为夜间模式的判定，避免了使用checkbox作
//判定时点击出错的问题。
...
if(night == '0'){
document.body.classList.add('night');
document.cookie = "night=1;path=/;SameSite=Strict"
console.log('夜间模式被手动开启啦');
document.getElementById("switch1").checked=true;
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/;SameSite=Strict"
console.log('夜间模式被手动关闭啦');
document.getElementById("switch1").checked=false;
}
- 关于背景的一个小问题。
这个是在设定背景图的时候发现的，设定背景图不随页面滚动的background-attachment属性在ios里无效。
原因是ios认为这个性能占用过多所以禁用了这个效果。
所以就出现了chrome上调试明明没问题但是iPhone上就是不对劲的情况。。。
解决方案也很简单，利用:before在body前新增一个伪类，然后在里面写css就🆗啦。
body:before{
content: '';
position: fixed;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url("https://img.yocoh.cn/images/2020/11/01/15972576896501994d72a4b81afc7.jpg") center 0 no-repeat;
background-size: cover;
}
//当然对其他元素也能得到相应的效果。
- 写在最后
最近其实在blog上修修补补的地方蛮多的，但是都感觉不能单独写一篇博文，而且懒嘛，就一直没动。
其实现在的夜间模式是有个小bug的，那就是自动切换部分如果当前时间与cookie设定冲突的话，会闪烁一下。查找到的解决方案是用php写页面，然后在body处加入php代码先进行判定。
但是暂时还没想到怎么运用到现在的这个主题中。
还有就是夜间模式不是很夜间，日间也不是很好看，颜色也只是随便调整了一下，并没有认真的微调，所以有些地方会显得很突兀。
欢迎点击右下角试试，然后评论告诉我意见或建议。
以上。