时间调节
下面分享两种方法，一种是根据时间自动变换为夜间模式，另一种是按钮切换的方式。 首先加入js代码，你可以扔footer页脚：<script type="text/javascript">
//夜间模式
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){
document.body.classList.add('night');
document.cookie = "night=1;path=/";
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/";
console.log('夜间模式关闭');
}
}else{
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.remove('night');
}else if(night == '1'){
document.body.classList.add('night');
}
}
})();
//夜间模式切换
function switchNightMode(){
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.add('night');
document.cookie = "night=1;path=/"
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/"
console.log('夜间模式关闭');
}
}
</script>
其次在header页头的body加入php判断
检测到cookie相关字段直接输出body class为night，防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
最后调试CSS
此区域内容需评论后可见
版权声明
看一下
感谢分享
这主题我看的眼睛疼。。
看看怎么搞
感谢分享
能打开就不错了
看看哈哈
好花得主题
看看
谢谢
学习一下
再看看
这主题我看的眼睛疼。。
转载请注明来源: https://tsyblog.com/6408.html
感谢分享
事实上
感谢分享
正常运行
看一眼吧，谢谢
感谢分享
转载请注明来源: http://tsyblog.com/6408.html
kankanan看看看看