網頁常見的換膚技術

小雨雨hi發表於2013-11-26
網頁
　　常見的例子就是：一個站點上有多個頁面樣式提供瀏覽者選擇。 
同時，在選擇了某樣式後，再次開啟該頁面時，將仍然保持該樣式。 
自然會想到了Cookie技術 
下面是HTML程式碼部分（另外再加需要的CSS檔案就可以使用了）： 
//  
   
 <HTML> 
//  
     
//  
   
 <HEAD> 
//  
     
//  
   
 <link ID=”skin” rel=”stylesheet”
type=”text/css”> 
//  
     
//  
   
 <TITLE>換膚技術</TITLE> 
//  
     
//  
   
 <SCRIPT
LANGUAGE=javascript> 
//  
     
//  
   
 <!– 
//  
     
//  
     function
SetCookie(name,value){ 
//  
     
//  
     
    var
argv=SetCookie.arguments; 
//  
     
//  
     
    var
argc=SetCookie.arguments.length; 
//  
     
//  
     
    var
expires=(2<argc)?argv[2]:null; 
//  
     
//  
     
    var
path=(3<argc)?argv[3]:null; 
//  
     
//  
     
    var
domain=(4<argc)?argv[4]:null; 
//  
     
//  
     
    var
secure=(5<argc)?argv[5]:false; 
//  
     
//  
     
   
document.cookie=name+”=”+escape(value)+((expires==null)?””:(“;
expires=”+expires.toGMTString()))+((path==null)?””:(“;
path=”+path))+((domain==null)?””:(“;
domain=”+domain))+((secure==true)?”;
secure”:””); 
//  
     
//  
   
 } 
//  
     
//  
     function
GetCookie(Name) { 
//  
     
//  
     
    var search = Name +
“=”; 
//  
     
//  
     
    var returnvalue =
“”; 
//  
     
//  
     
    if (document.cookie.length
> 0) { 
//  
     
//  
     
     
    offset =
document.cookie.indexOf(search); 
//  
     
//  
     
     
    if (offset != -1) {
   
  
//  
     
//  
     
     
     
    offset +=
search.length; 
//  
     
//  
     
     
     
    end =
document.cookie.indexOf(“;”, offset);  
     
     
     
    
//  
     
//  
     
     
     
    if (end ==
-1) 
//  
     
//  
     
     
     
     
    end =
document.cookie.length; 
//  
     
//  
     
     
     
   
returnvalue=(document.cookie.substring(offset,end)); 
//  
     
//  
     
     
    } 
//  
     
//  
     
    } 
//  
     
//  
     
    return
returnvalue; 
//  
     
//  
   
 } 
//  
     
//  
     var
thisskin; 
//  
     
//  
   
 thisskin=GetCookie(“nowskin”); 
//  
     
//  
   
 if(thisskin!=””) 
//  
     
//  
     
   
skin.href=thisskin; 
//  
     
//  
   
 else 
//  
     
//  
     
   
skin.href=”css.css”; 
//  
     
//  
     function
changecss(url){ 
//  
     
//  
     
   
if(url!=””){ 
//  
     
//  
     
     
   
skin.href=url; 
//  
     
//  
     
     
    var expdate=new Date();
//  
     
//  
   
 expdate.setTime(expdate.getTime()+(24*60*60*1000*30)); 
//  
     
//  
     
     
   
//expdate=null; 
//  
     
//  
     
     
     
     
     
     
   
//以下設定COOKIES時間為1年,自己隨便設定該時間.. 
//  
     
//  
     
     
   
SetCookie(“nowskin”,url,expdate,”/”,null,false); 
//  
     
//  
     
    } 
//  
     
//  
   
 } 
//  
     
//  
   
 //–> 
//  
     
//  
   
 </SCRIPT> 
//  
     
//  
   
 </HEAD> 
//  
     
//  
   
 <BODY> 
//  
     
//  
   
 <P>請選擇下面的下拉選單測試換膚效果</P> 
//  
     
//  
   
 <a href=#
>css.css</a> 
//  
     
//  
   
 <a href=#
>css1.css</a> 
//  
     
//  
   
 <a href=#
>css2.css</a> 
//  
     
//  
   
 <a href=#
>css3.css</a> 
//  
     
//  
   
 <br> 
//  
     
//  
   
 <select
> 
//  
     
//  
   
 <option>選擇樣式單檔案</option> 
//  
     
//  
   
 <script
language=”javascript”> 
//  
     
//  
     var
csss=new Array(); 
//  
     
//  
   
 csss[0]=”css.css”; 
//  
     
//  
   
 csss[1]=”css1.css”; 
//  
     
//  
   
 csss[2]=”css2.css”; 
//  
     
//  
   
 csss[3]=”css3.css”; 
//  
     
//  
     var
i; 
//  
     
//  
   
 for(i=0;i<4;i++) 
//  
     
//  
     
   
if(thisskin==csss[i]) 
//  
     
//  
     
     
   
document.write(“<option value=””+csss[i]+””
selected>”+csss[i]+”樣式單檔案</option>”); 
//  
     
//  
     
    else 
//  
     
//  
     
     
   
document.write(“<option
value=””+csss[i]+””>”+csss[i]+”樣式單檔案</option>”); 
//  
     
//  
   
 </script> 
//  
     
//  
   
 </select> 
//  
     
//  
   
 </BODY> 
//  
     
//  
   
 </HTML>


相關文章