页面换肤

页面HTML:

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< title > website Replacement Skin </ title >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=uft-8"   />  

< link  rel ="alternate stylesheet"  href ="skin/blue.css"  type ="text/css"  media ="screen"  title ="blue"   />  
< link  rel ="alternate stylesheet"  href ="skin/green.css"  type ="text/css"  media ="screen"  title ="green"   />  
< link  rel ="alternate stylesheet"  href ="skin/orange.css"  type ="text/css"  media ="screen"  title ="orange"   />  
< link  rel ="alternate stylesheet"  href ="skin/beige.css"  type ="text/css"  media ="screen"  title ="beige"   />  

< script  type ="text/javascript"  src ="js/skin.js" ></ script >
</ head >
< body >
< div  >  
           < span  class ="color blu" >< a  href ="#"  onclick ="setBackgroundColor('blue');return false;"  title ="blue" ></ a ></ span >  
           < span  class ="color verde" >< a  href ="#"  onclick ="setBackgroundColor('green');return false;"  title ="green" ></ a ></ span >  
           < span  class ="color arancio" >< a  href ="#"  onclick ="setBackgroundColor('orange');return false;"  title ="orange" ></ a ></ span >  
           < span  class ="color beige" >< a  href ="#"  onclick ="setBackgroundColor('beige');return false;"  title ="beige" ></ a ></ span >  
</ div >  
 … …
</ body >
</ html >

skin.js:

代码

var  defaultBackgroundColor  =   " beige " ;
var  currentBackgroundColor;

function  setBackgroundColor(color) {
   var  i, a;
   for (i = 0 ; (a  =  document.getElementsByTagName( " link " )[i]); i ++ ) {
     if (a.getAttribute( " rel " ).indexOf( " style " )  !=   - 1   &&  a.getAttribute( " title " )) {

      
      a.disabled  =   true ;
       if (a.getAttribute( " title " )  ==  color) a.disabled  =   false ;
    }
  }
  
  currentBackgroundColor  =  color;
}

function  createCookie(name,value,days) {
   if  (days) {
     var  date  =   new  Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000 ));
     var  expires  =   " ; expires= " + date.toGMTString();
  }
   else  expires  =   "" ;
  document.cookie  =  name  +   " = "   +  value  +  expires  +   " ; path=/ " ;
}

function  readCookie(name) {
   var  nameEQ  =  name  +   " = " ;
   var  ca  =  document.cookie.split( ' ; ' );
   for ( var  i = 0 ;i  <  ca.length;i ++ ) {
     var  c  =  ca[i];
     while  (c.charAt( 0 ) == '   ' ) c  =  c.substring( 1 ,c.length);
     if  (c.indexOf(nameEQ)  ==   0 )  return  c.substring(nameEQ.length,c.length);
  }
   return   null ;
}

window.onunload  =   function (e) {
  createCookie( " backgroundColor " , currentBackgroundColor,  365 );
}

var  cookie  =  readCookie( " backgroundColor " );
var  bgColor  =  cookie  ?  cookie : defaultBackgroundColor;
setBackgroundColor(bgColor);

 

转载于:https://www.cnblogs.com/wukuinhm/archive/2009/11/28/css_website_Replacement_Skin.html