网站的护眼模式和夜间模式
不采用数据库存储字段的方式,而采用cookie来判断是哪种模式
如果会使用js对cookie进行赋值,取值,删除,也可以只用js做
护眼模式图示:
1 给按钮绑定事件
<li class="layui-nav-item">
<button class="layui-btn layui-btn-primary" onclick="eye(this)" id="eye">开启护眼模式</button>
</li>
2 js事件:点击根据innerHTML的值传递不同的‘type’值
function eye(obj){
if(obj.innerHTML=='开启护眼模式'){
$.post(ThinkPHP['ROOT']+'/index.php/index/index/eye',{'type':'open'},function(res){
if(res.code==1){
$('#header').css('background','#C7EDCC');
$('body').css('background','#C7EDCC');
obj.innerHTML='关闭护眼模式';
}
},'json')
}else if(obj.innerHTML=='关闭护眼模式'){
$.post(ThinkPHP['ROOT']+'/index.php/index/index/eye',{'type':'close'},function(res){
if(res.code==1){
$('#header').css('background','#fff');
$('body').css('background','#fff');
obj.innerHTML='开启护眼模式';
}
},'json')
}
}
3 服务端 根据接收的type值得不同 决定是否生成cookie
// 开启和关闭护眼模式
public function eye(){
$type = input('post.type');
if($type=='open'){
// 开启护眼 设置cookie
Cookie('theme','on');
exit(json_encode(array('code'=>1)));
}elseif($type=='close'){
// 关闭护眼 清除cookie
Cookie::delete('theme');
exit(json_encode(array('code'=>1)));
}
}
// 判断是不是护眼模式
public function istheme(){
if(Cookie::get('theme')){
exit(json_encode(array('code'=>1)));
}else{
exit(json_encode(array('code'=>-1)));
}
}
4 回到第二步前端回调函数做出临时的样式改变(但是网站一刷新就会变回来,这样不行)
5 网站一加载就判断是不是护眼模式网站一加载就发送个ajax请求到服务端index控制器下istheme方法,istheme方法是根据网站是否有cookie('theme')来返回不同的数据,前端在根据不同的数据来改变样式
$(function(){
$.post(ThinkPHP['ROOT']+'/index.php/index/index/istheme',function(res){
if(res.code==1){
$('#header').css('background','#C7EDCC');
$('body').css('background','#C7EDCC');
$('#eye').html('关闭护眼模式');
}else{
$('#header').css('background','#fff');
$('body').css('background','#fff');
$('#eye').html('开启护眼模式');
}
},'json')
})