網站的護眼模式和夜間模式

不採用資料庫儲存欄位的方式，而採用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')
	})