我正在测试日/轻背景切换的javascript代码，我不知道该怎么做。我是javascript的新手，所以我正在学习新东西。
那么我想做什么？
当我点击按钮“日”（将背景变为黄色）时，我希望刷新页面后，黄色背景的样式保留在代码中。我听说过有关Cookies / 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', '');
});
});
答案 0 :(得分：1)
我做了什么：
<script> （个人偏好） <body>代码之间
event添加到onClick元素的button事件中。event.preventDefault()元素的onclick事件开头添加了button：确保点击按钮时页面不会刷新。 警告： 所有 按钮在您的页面中的行为相同。如果您有其他按钮，我建议您为这三个按钮添加另一个类并将事件绑定到button.myClass元素。
button状态更改中添加了条件，因此重置按钮不会被禁用。eval($(this).val().toLowerCase()+"();");获取所点击的button的值并执行附加的功能。<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>
（JSFiddle）＆lt; - 查看 更新了课程＆amp;饼干
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");
}
});
答案 1 :(得分：-2)
我建议您不要使用cookie，除非不支持localStorage。它们会减慢您的网站速度。
if(localStorage){
localStorage.setItem("bgColor", "lightSwitch");
}else{
document.cookie = "bgColor=lightSwitch";
}