cookie和dom实际操作启用款式表完成网页页面换肤

日期:2021-01-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页


基本原理:根据存储cookie和dom实际操作启用不一样的款式表文档来完成前台接待换肤.
换肤示例免费下载:sour.rar
Html编码一部分:
1.要有1个带id的款式表连接,大家要根据实际操作这个连接来启用不一样的href.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.皮肤挑选按钮(后台管理为每一个li加上onclick恶性事件,开启换肤作用)
<ul id="skin">
<li id="skin_0" title="灰色">灰色</li>
<li id="skin_1" title="翠绿色">翠绿色</li>
<li id="skin_2" title="黄色">黄色</li>
<li id="skin_3" title="蓝色">蓝色</li>
<li id="skin_4" title="粉色">粉色</li>
<li id="skin_5" title="紫色">紫色</li>
</ul>

Js一部分:
1.换肤方式
//设定cookie,按钮选定情况,网页页面皮肤
skin.setSkin=function(n){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i )
{
skins[i].className="";//原始化按钮情况
}
skin.setCookie(n);//储存当今款式
$("skin_" n).className="selected";//设定选定皮肤按钮的款式
$("cssfile").href="css/main" n ".css";//设定网页页面款式
}

2.存储cookie
//将当今皮肤n存到cookie
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime() 24*60*60*365*1000);
var flag="Skin_Cookie=" n;
document.cookie=flag ";expires=" expires.toGMTString();
}
//回到客户设定的皮肤款式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name "=");
if(start1==⑴){
skin=0;//假如沒有设定则显示信息默认设置款式
}
else{
var start=mycookie.indexOf("=",start1) 1;
var end=mycookie.indexOf(";",start);
if(end=⑴){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;

}

3.关联换肤按钮恶性事件
skin.addEvent=function(){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i )
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}

4.网页页面载入进行后设定皮肤款式
window.onload=function(){
skin.setSkin(skin.readCookie());//依据载入cookie回到值设定皮肤款式
skin.addEvent();//关联按钮恶性事件