天天看点

js利用cookie实现网页的换肤

            在浏览网页的时候,我们经常可以看到部分页面上具有换肤功能,点击改变皮肤且但我们下次浏览的时候,还会是我们选择的皮肤。作为菜鸟来说,这是一种赤裸裸的诱惑……今天查了相关资料,很粗糙的写了一个利用coolkie的换肤效果。求大神勿喷,也请多多指点。下面是菜鸟代码……

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>show0731</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-07-31 -->
		<style type="text/css">
			body {padding:0;margin:0;}
			input{width:50px;height:50px;border:none;}
		</style>
		<script type="text/javascript">
window.οnlοad=function(){
	var bg=getCookie('bg');//传入的值为cookie的name、
	if(bg!=null){
		document.body.style.background="url(images/"+bg+".jpg)";
	}
	else{
		document.body.style.background="url(images/0.jpg)";
	}
};

function change(name,value){//点击改变背景,且重新写入cookie
	document.body.style.background="url(images/"+value+".jpg)";
	setCookie(name,value);
}

function setCookie(name,value){//建立cookie记录
	var day=30;//有效时间
	var exp=new Date();//建立Date对象
	exp.setTime(exp.getTime()+day*24*60*1000);//setTime(),以毫秒设置Date对象。etTime()可返回距 1970 年 1 月 1 日之间的毫秒数。
	//写入cookie,escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串
	document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();
}
function getCookie(name)//获取cookie
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");//正则表达式
    if(arr=document.cookie.match(reg)){//match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
    	return (arr[2]);
    }
    else{
    	return null;
    }
}
		</script>
	</head>
	<body>
		<input type="button" style="background:#CCCCFF;" οnclick="change('bg',0)"/>
		<input type="button" style="background:#7807f8;" οnclick="change('bg',1)"/>
		<input type="button" style="background:#1616e2;" οnclick="change('bg',2)"/>
		<input type="button" style="background:#0ad4ba;" οnclick="change('bg',3)"/>
		<input type="button" style="background:#0ad41d;" οnclick="change('bg',4)"/>

	</body>
</html>

           

源文件免费下载地址: http://download.csdn.net/detail/u014703834/7699979