天天看點

網頁常見的換膚技術

  常見的例子就是:一個站點上有多個頁面樣式提供浏覽者選擇。 

同時,在選擇了某樣式後,再次打開該頁面時,将仍然保持該樣式。 

自然會想到了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; 

argc=SetCookie.arguments.length; 

expires=(2<argc)?argv[2]:null; 

path=(3<argc)?argv[3]:null; 

domain=(4<argc)?argv[4]:null; 

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":""); 

 } 

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) 

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"; 

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> 

>css1.css</a> 

>css2.css</a> 

>css3.css</a> 

 <br> 

 <select

> 

 <option>選擇樣式單檔案</option> 

 <script

language="javascript"> 

csss=new Array(); 

 csss[0]="css.css"; 

 csss[1]="css1.css"; 

 csss[2]="css2.css"; 

 csss[3]="css3.css"; 

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>

繼續閱讀