昼/夜模式- CSS + JQuery - cookie

Day/Night mode - CSS + JQuery - Cookies?

本文关键字：JQuery cookie CSS 模式      更新时间：2023-09-26

我正在测试javascript代码白天/灯光背景切换，我不知道如何做某事。我是javascript的新手，所以我在学习新的东西。

我想做什么?
当我点击例如按钮"天"(改变背景为黄色)，我希望黄色背景的样式在页面刷新后留在代码中。我听说过cookie/LocalStorage，但我不知道如何为这段代码实现它。

如果你知道更简单的方法，可以随意修改整个代码，但请解释为什么这样更好，或者为什么应该这样。

提前感谢您的帮助。

代码如下:

HTML: 

<body id="body">
    <input type="button" onclick="day();" value="Day" />
    <input type="button" onclick="night();" value="Night" />
    <input type="button" onclick="reset();" value="Reset" />   
</body>
CSS: 

.darkSwitch {
  background: #808080;
}
.lightSwitch {
  background: #ffff99;
}
JavaScript: 

function day() {
    body.className = "lightSwitch";
};
function night() {
    body.className = "darkSwitch";    
};
function reset() {
    body.className = "";
};
$(function() {
    var button = $('input[type=button]');
    button.on('click', function() {
        button.not(this).removeAttr('disabled');
        $(this).attr('disabled', '');
    });
});

最后编辑:现在禁用页面加载中的选定按钮，代码不在本文中，请参阅最新的JSFiddle

<标题>

我做了什么:

  • 代码放在<body> (个人偏好)
    • 末尾的<script>标签之间。
  • 我在button元素的onClick事件中增加了参数event。
  • 我在button元素的onclick事件开始时添加了event.preventDefault():确保单击按钮时页面不会刷新。

警告: 所有按钮将在您的页面中表现相同。如果您有其他按钮，我建议您为这三个按钮添加另一个类，并将事件绑定到button.myClass元素上。

  • 我在button状态改变上添加了一个条件，所以reset按钮不会被禁用。
  • eval($(this).val().toLowerCase()+"();");获取被单击的button的值，并执行附加在其上的函数。
<标题> 解决方案

HTML 

<body id="body">
    <input type="button" class="changeBg" onclick="day();" value="Day" />
    <input type="button" class="changeBg" onclick="night();" value="Night" />
    <input type="button" class="changeBg" onclick="reset();" value="Reset" />
</body>
JavaScript

(JSFiddle) <——查看这个更新了类&饼干

function day() {
    body.className = "lightSwitch";
};
function night() {
    body.className = "darkSwitch";
};
function reset() {
    body.className = "";
};
$(function () {
    /* RegEx to grab the "bgColor" cookie */
    var bgColor = document.cookie.replace(/(?:(?:^|.*;'s*)bgColor's*'='s*([^;]*).*$)|^.*$/, "$1");
    
    var button = $('input[type=button].changeBg');
    button.on('click', function (event) {
        event.preventDefault();
        
        /* Executing the function associated with the button */
        eval($(this).val().toLowerCase() + "();");
        button.not($(this)).removeAttr('disabled');
        if ($(this).val() != "Reset") {
            $(this).attr('disabled', '');
            
            /* Here we create the cookie and set its value, does not happen if it's Reset which is fired. */
            document.cookie = "bgColor="+$(this).val();
        }
    });
    
    /* If the cookie is not empty on page load, execute the function of the same name */
    if(bgColor.length > 0)
    {     
        eval(bgColor.toLowerCase()+'()');
         
        /* Disable the button associated with the function name */
        $('button[value="'+bgColor+'"]').attr("disabled","disabled");
    }
});

除非不支持localStorage，否则我建议您不要使用cookie。它们会减慢你的网站速度。

if(localStorage){
   localStorage.setItem("bgColor", "lightSwitch");
}else{
   document.cookie = "bgColor=lightSwitch";
}
相关文章：