天天看點

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