在浏覽網頁的時候,我們經常可以看到部分頁面上具有換膚功能,點選改變皮膚且但我們下次浏覽的時候,還會是我們選擇的皮膚。作為菜鳥來說,這是一種赤裸裸的誘惑……今天查了相關資料,很粗糙的寫了一個利用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