博客园美化夜间模式
程序员文章站
2022-05-23 12:14:05
博客园美化夜间模式 一.点击控制样式 一.触发点击 二.修改按钮样式以及对于类名 三.将模式信息存入sessionStorage中 四.更具按钮的类名,自己博客样式进行跟换 二.时间控制切换 考虑情况: 1.时间到了提醒是不是要切换 2.已经是夜间模式了就用切换 3.有些人不喜欢这些提示 这段代码解 ......
博客园美化夜间模式
一.点击控制样式
主要看思路,自己增删改查,里面样式只针对我的博客
一.触发点击
二.修改按钮样式以及对于类名
三.将模式信息存入sessionstorage中
四.更具按钮的类名,自己博客样式进行跟换
<!--夜间模式点击事件js--> <script > let night_close = document.queryselector('.night-close')||document.queryselector('.night-open'); night_close.onclick = function () { let button_classname = this.classname; button_classname == 'night-close' ? sessionstorage.model = 'night' : sessionstorage.model = 'sun' button_classname == 'night-close' ? this.classname = 'night-open' : this.classname = 'night-close' button_classname == 'night-close' ? this.innerhtml = '夜间模式:<span style="color:greenyellow">开启</span>' : this.innerhtml = '夜间模式:<span style="color:red">关闭</span>' let body = document.queryselector('body'); let post = document.queryselector('.post'); let header = document.queryselector('#header'); let days = document.queryselectorall('.day'); let tiankong = document.queryselector('.tiankong'); let calendar = document.queryselector('#blog-calendar'); //页首图片 button_classname == 'night-close' ? tiankong.style.display = 'none' : tiankong.style.display = 'block' //整体颜色 button_classname == 'night-close' ? body.style.background = '#0b1226' : body.style.background = '#fff' //日历 calendar.style.backgroundcolor = '#ffffff' //头部 button_classname == 'night-close' ? header.style.background = 'url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_sleep2.png) no-repeat 898px -65px' : header.style.background = 'url(https://images.cnblogs.com/cnblogs_com/pythonywy/1455150/o_1kongbai.png)' if (button_classname != 'night-close') { header.style.backgroundsize = '100% 100%' } if (days) { for (var days_index = 0, a = days.length; days_index < a; days_index++) { days[days_index].style.backgroundcolor = '#ffffff' } } //正文 if (post) { post.style.backgroundcolor = '#ffffff' } }; </script>
二.时间控制切换
考虑情况:
1.时间到了提醒是不是要切换
2.已经是夜间模式了就用切换
3.有些人不喜欢这些提示
这段代码解决这3中情况,内容自己理解
<!--夜间模式分支,根据时间通过session中存储的信息修改--> <script> var time_obj = new date(); var time_hour = time_obj.gethours(); var night_model = sessionstorage.getitem('model'); var chiose = sessionstorage.getitem('chiose'); console.log(!chiose); console.log(night_model != 'night'); console.log(parseint(time_hour) >= 18 || parseint(time_hour) <= 6); if (!chiose) { if (night_model != 'night') { if (parseint(time_hour) >= 18 || parseint(time_hour) <= 6) { if (confirm("到晚上了是否开启夜间模式?")) { sessionstorage.model = 'night'; if (confirm('以后要不要提醒您呢')) { sessionstorage.removeitem('chiose') } else { sessionstorage.chiose = 1 } } else { sessionstorage.model = 'sun'; if (confirm('以后要不要提醒您呢')) { sessionstorage.chiose.removeitem('chiose') } else { sessionstorage.chiose = 1 } } } } } </script>
三.结合session存储的信息进行切换模式
为了解决问题:
1.跳转页面后要重复切换模式
2.提示后进行切换
注意点:这段代码必须放在时间控制后面,不然时间那段没啥用
<!--夜间模式分支,session中有night切换夜间模式--> <script > letmodel = sessionstorage.getitem('model') if (model == 'night') { let body_night = document.queryselector('body'); let post_night = document.queryselector('.post'); let header_night = document.queryselector('#header'); let days_night = document.queryselectorall('.day'); let tiankong_night = document.queryselector('.tiankong'); let calendar_night = document.queryselector('#blog-calendar'); night_close.classname = 'night-open' night_close.innerhtml = '夜间模式:<span style="color:greenyellow">开启</span>' tiankong_night.style.display = 'none' body_night.style.background = '#0b1226' calendar_night.style.backgroundcolor = '#ffffff' header_night.style.background = 'url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_sleep2.png) no-repeat 898px -65px' if (days_night) { for (var days_index = 0, c = days_night.length; days_index < c; days_index++) { console.log(days_night[days_index]) days_night[days_index].style.backgroundcolor = '#ffffff' } if (post_night) { post_night.style.backgroundcolor = '#ffffff' } } } </script>
代码仅作为参考