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>



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