页面换肤

页面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"><href="#" onclick="setBackgroundColor('blue');return false;" title="blue"></a></span> 
          
<span class="color verde"><href="#" onclick="setBackgroundColor('green');return false;" title="green"></a></span> 
          
<span class="color arancio"><href="#" onclick="setBackgroundColor('orange');return false;" title="orange"></a></span> 
          
<span class="color beige"><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) == 0return 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值