JavaScript換膚

設置cookie的部分沒有調通,還需調整

先貼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>換膚</title>
<link type="text/css" rel="stylesheet" href="style1.css" title="白色風格"/>
<link type="text/css" rel="stylesheet" href="style2.css" title="灰色風格"/>
<link type="text/css" rel="stylesheet" href="style3.css" title="黃色風格"/>
<script type = "text/javascript">
       
     //添加事件處理函數
     function addEventListener(ele,type,func){
                 
             if(ele.addEventListener){
               //DOM兼容瀏覽器
	       ele.addEventListener(type,func,false);
	     }else{
               //IE
	       ele.attachEvent("on"+type,func);
	     }
     }

     function $(id){
          return document.getElementById(id);
     }


     function setActiveStyleSheet(title){
        //所有的link元素
	var links = document.getElementsByTagName("link");
        
	//遍歷所有的<link>元素
        for(var i= 0; i<links.length;i++){
         //當前的link元素
	 var link=links[i];

	 //如果是樣式錶鏈接
	 if(link.rel =="stylesheet" && link.title){

          //首先禁用所有的樣式表
           link.disabled = true;
	   //如果找到title屬性符合的樣式表,則將其激活
	   if(link.title == title)
	   link.disabled = false;

	 }
	}

      //將title屬性保存在Cookie中
      SetCookie("activeStyleSheet",title,7);
     }

    function SetCookie(cookieName,cookieValue,nDays){

     //當前日期
     var today = new Date();
     //Cookie過期事件
     var expire = new Date();

     //如果未設置nDays參數或者nDays爲0,取默認值1
     if(nDays == null||nDays==0)
        nDays=1;

     //計算Cookie過期時間
     expire.setTime(today.getTime() + 3600000*24*nDays);

     //設置Cookie值
   //  document.cookie =cookieName+"="+escape(cookieValue)+"; expires="+expire.toGMTString();
 alert(document.cookie);
  document.cookie= "name1=value1";
	 alert(document.cookie);
   }

   function ReadCookie(cookieName){
     //Cookie字符串
     var theCookie =""+document.cookie;
     
     //找到cookieName的位置
     var ind =theCookie.indexOf(cookieName);

     //如果未找到cookieName,返回空字符串
     if(ind==-1||cookieName =="")return "";

     //確定分號的位置
     var ind1 = theCookie.indexOf(';',ind);
     if(ind1 == -1) ind1 =theCookie.length;

     //讀取Cookie值
     return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
    }
   

   function setDefaultStyleSheet(){
    //默認選中第一個樣式表

    if($("styleSel").options.lenght>0) {
     setActiveStyleSheet($("styleSel").options[0].value);
    }
   }

     function init(){
	// alert("ss");

     //從Cookies中讀取樣式信息
     var savedStyleSheet = ReadCookie ("activeStyleSheet");

      var links =document.getElementsByTagName("link");
      //遍歷所有的<link>元素
      for(var i=0; i<links.length; i++){
         var link =links[i];
	 //如果是樣式錶鏈接
          if(link.rel =="stylesheet"){

	  //創建新的option元素
          var option =document.createElement("option");
          //設置<option>元素的value屬性
           option.value= link.title;
	   //設置<option>元素的顯示文本內容
	   option.innerHTML =link.title;
	   //將<option>元素添加到<select>元素中		
	   $("styleSel").appendChild(option);
      }
     }
      
      //激活選中的樣式表
      if(savedStyleSheet) {

       setActiveStyleSheet(savedStyleSheet);
      }else{
        //設置默認樣式表
	setDefaultStyleSheet();
   
      }
       
       
       //添加<select>元素的change事件處理函數
       addEventListener($("styleSel"),"change",function(evt){
       //激活選中的樣式表
       setActiveStyleSheet($("styleSel").value);
       //切換焦點
       document.body.focus();
       });


  
     }

       </script>

       </head>
       <body οnlοad="init()">
       <select id="styleSel">
       </select>
       <div>
       <p>
          ..wwwwwwww
	  </p>
	  </div>
       </body>
       </html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章