Javascript 更改颜色并设置一个cookie
我对Javascript和堆栈溢出社区是新手。我创建了一个脚本来更改特定元素的样式,结果如下: HTML: JSFiddle: 我读了一些关于如何在JavaScript中使用Cookie的手册,但我对如何使用它们还不清楚。我想问一下,是否有人可以用这个脚本向我展示如何设置cookie:当有人更改颜色时,单击id为绿色或波尔多的span,信息将被存储,如果刷新页面,则在用户清理浏览器缓存之前,页面将保持所选颜色。 这样我就可以清楚地知道应该如何使用它们 致以最良好的祝愿,Javascript 更改颜色并设置一个cookie,javascript,cookies,Javascript,Cookies,我对Javascript和堆栈溢出社区是新手。我创建了一个脚本来更改特定元素的样式,结果如下: HTML: JSFiddle: 我读了一些关于如何在JavaScript中使用Cookie的手册,但我对如何使用它们还不清楚。我想问一下,是否有人可以用这个脚本向我展示如何设置cookie:当有人更改颜色时,单击id为绿色或波尔多的span,信息将被存储,如果刷新页面,则在用户清理浏览器缓存之前,页面将保持所选颜色。 这样我就可以清楚地知道应该如何使用它们 致以最良好的祝愿, 基尔这把小提琴应该能用
基尔这把小提琴应该能用 对于这个答案,我使用了Mandeep Janjua发布的第二个答案中的代码片段
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
document.getElementById("green").onclick = function() {colorGreen()};
document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
var x = readCookie('color')
if (x === 'green') {
colorGreen();
} else if(x === 'bordeaux'){
colorBordeaux();
}
function colorGreen() {
document.getElementById("menu").style.borderBottom = "3px solid #448F44";
document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
createCookie('color','green',7);
}
function colorBordeaux() {
document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
createCookie('color','bordeaux',7);
}
不确定你是否读过,但这提供了一个非常好的概述,应该可以帮助你回答问题:谢谢你的参考:刚刚修复了代码,我错误地上传了旧代码。@Keaire没问题,如果你需要任何帮助理解它,请尽管问。
document.getElementById("green").onclick = function() {colorGreen()};
document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
function colorGreen() {
document.getElementById("menu").style.borderBottom = "3px solid #448F44";
document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
}
function colorBordeaux() {
document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
document.getElementById("green").onclick = function() {colorGreen()};
document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
var x = readCookie('color')
if (x === 'green') {
colorGreen();
} else if(x === 'bordeaux'){
colorBordeaux();
}
function colorGreen() {
document.getElementById("menu").style.borderBottom = "3px solid #448F44";
document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
createCookie('color','green',7);
}
function colorBordeaux() {
document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
createCookie('color','bordeaux',7);
}