cookie换肤功能

Posted 2020-11-17 luoguixin

<div class="selectSkin">
<input id="red" class="themeBtn" type="button" value="红色">
<input id="yellow" class="themeBtn" type="button" value="黄色">
<input id="green" class="themeBtn" type="button" value="绿色">
</div>
<div class="content">cookie换肤功能</div>
<style scoped>
.content {
height: 300px;
width: 300px;
margin-top: 20px;
color: #fff;
text-align: center;
}

.themeBtn {
background: #f5f5f5;
padding: 5px;
border: 1px solid #aaa4a4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>

 

function saveCookie(name, value) { //存储cookies
var Days = 1; //此 cookie 将被保存 1 天
var exp = new Date(); //new Date
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
}

function getCookie(name) { //读取cookies函数
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]); return null;
}

changeThemes();
function changeThemes() { //换肤
var stylesheet = document.getElementById(‘themeFile‘);
$(".selectSkin").find("input").click(function () {
var Id = $(this).attr(‘id‘); //找到input的ID
$(".content").css({ "background-color": Id });
saveCookie("Id", Id); //将点击事件存放在浏览器的cookie记录里
});
var themeId = getCookie(‘Id‘);//读取cookies记录
if (themeId != null) { //判断cookies记录是否存在
$(".content").css({ "background-color": themeId }); //若存在就选择用户点击的主题
} else {
$(".content").css({ "background-color": "red" }); //不存在就默认为红色
}
}