换肤 带cookie

:shock:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>换肤</title>
<style type="text/css">
body{font-size:12px}
*{margin:0;padding:0;border:0;}
ul,li{list-style:none}

.login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;width:215px;color:#333;line-height:25px;margin:0px auto;padding-left:15px;}
.login_skin li{float:left;width:30px;background:#000;color:#fff;margin-left:10px;text-align:center;cursor:pointer;}

#a{background:#f00;}
#b{background:#0f0}
#c{background:#00f;}

.box{width:200px;height:200px;background:#000;margin:0px auto;}
.aaa .box{background:#f00;}
.bbb .box{background:#0f0;}
.ccc .box{background:#00f;}
</style>

<script type="text/javascript">
// --- 设置cookie
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}


//--- 获取cookie
function getCookie(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 skin(){
var skin_id="aaa";
if(getCookie("id")!=null){
skin_id=getCookie("id");
}
document.body.className=skin_id;
var skin_nub=document.getElementById("skin").getElementsByTagName("li");
for(var i=0; i<skin_nub.length;i++){
skin_nub[i].onclick=function(){
var skin_id=this.getAttribute("id");
document.body.className=skin_id;
setCookie("id",skin_id,1);
}
}
}
</script>
</head>
<body onload="skin()">
<ul class="login_skin" id="skin">
<li id="aaa">红</li>
<li id="bbb">绿</li>
<li id="ccc">蓝</li>
</ul>

<div class="box"></div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值