頁麪換膚功能淺析
考試大整理:原理:通過存取cookie和dom操作調用不同的樣式表文件來實現前台換膚.
Html代碼部分:
1.要有一個帶id的樣式表鏈接,我們要通過操作這個鏈接來調用不同的href.
2.皮膚選擇按鈕(後台爲每個li添加onclick事件,觸發換膚功能)
- 灰色
- 綠色
- 黃色
- 藍色
- 粉色
- 紫色
Js部分:
1.換膚方法
//設置cookie,按鈕選中狀態,頁麪皮膚
skin.setSkin=function(n){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i
skins[i].className="";//初始化按鈕狀態
}
skin.setCookie(n);//保存儅前樣式
$("skin_" n).className="selected";//設置選中皮膚按鈕的樣式
$("cssfile").href="css/main" n".css";//設置頁麪樣式
}
2.存取cookie
//將儅前皮膚n存到cookie
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime() 24*60*60*365*1000);
var flag="Skin_Cookie=" n;
document.cookie=flag";expires=" expires.toGMTString();
}
//返廻用戶設置的皮膚樣式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name"=");
if(start1==-1){
skin=0;//如果沒有設置則顯示默認樣式
}
else{
var start=mycookie.indexOf("=",start1) 1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
3.綁定換膚按鈕事件
skin.addEvent=function(){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.頁麪加載完成後設置皮膚樣式
window.onload=function(){
skin.setSkin(skin.readCookie());//根據讀取cookie返廻值設置皮膚樣式
skin.addEvent();//綁定按鈕事件
0條評論