Blog park beautification night mode
A. Click the control style
主要看思路,自己增删改查,里面样式只针对我的博客
A trigger click
II. Modify button style and class name for
III. The pattern information stored in sessionStorage
IV. More Button class name, carried out his blog style with change
<!--夜间模式点击事件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>
II. Switching time control
Consider the situation:
1. Time to be reminded not to switch
2. Have a night mode is switched on by
3. Some people do not like these tips
The code to solve these 3 cases, the content understand
<!--夜间模式分支,根据时间通过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);
if (!chiose) {
if (night_model != 'night') {
if (parseInt(time_hour) >= 18 || parseInt(time_hour) <= 6) {
if (confirm("到晚上了是否开启夜间模式?")) {
sessionStorage.model = 'night';
if (confirm('以后要不要提醒您呢')) {
sessionStorage.chiose = false
} else {
sessionStorage.chiose = true
}
} else {
sessionStorage.model = 'sun';
if (confirm('以后要不要提醒您呢')) {
sessionStorage.chiose = false
} else {
sessionStorage.chiose = true
}
}
}
}
}
</script>
III. Binding information stored in session mode switch
In order to solve the problem:
1. Go to page switching pattern repeat
2. When prompted to switch
Precautions: This code must be placed behind the control time, or time period futile
<!--夜间模式分支,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>
代码仅作为参考