网站的护眼模式和夜间模式

                                网站的护眼模式和夜间模式

不采用数据库存储字段的方式,而采用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')
	})

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在MATLAB中启用夜间模式(黑色主题),你可以按照以下步骤操作: 1. 打开MATLAB并在命令窗口中输入prefdir,以获取MATLAB的首选项文件夹的路径。 2. 在打开的文件夹中找到matlab.prf文件,如果找不到该文件,请确保显示隐藏文件并重新启动MATLAB。 3. 打开matlab.prf文件并将以下内容添加到文件的末尾: ``` Editor.VariableHighlighting.Color=C-6931898 ColorsText=C-460558 Colors_M_SystemCommands=C-448910 Editorhighlight-lines=C-11974594 Colors_M_Warnings=C-27648 Colors_M_Strings=C-1647756 Editor.NonlocalVariableHighlighting.TextColor=C-5471745 Colors_HTML_HTMLLinks=C-16732805 Colors_M_Comments=C-8355712 Colors_M_Errors=C-65536 Colors_M_UnterminatedStrings=C-5111808 ColorsBackground=C-14211038 Colors_M_Keywords=C-10036753 Color_CmdWinWarnings=C-39936 ColorsMLintAutoFixBackground=C-7973573 Colors_M_Keywords=C-10036753 Editorhighlight-lines=C-13553108 Editorhighlight-caret-row-boolean-color=C-2167080 ColorsUseSystem=Bfalse ``` 4. 保存文件并重新启动MATLAB。 这样,MATLAB的界面就会切换到夜间模式,呈现出黑色主题。请注意,这些颜色值是基于默认的Monokai配色方案和个人偏好进行设置的。如果需要更改颜色,可以按照相同的格式修改相应的颜色值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Matlab的护眼模式设置](https://blog.csdn.net/Felaim/article/details/75678804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [ubuntu20.04下面matlabR2015b的夜间模式设置](https://blog.csdn.net/appleyuchi/article/details/107436813)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值