javascript css cookie换皮肤

一说到javascript就有人会想到java,但是他们完会是两回事,javascript是面向对象的动态类型的区分大小写的客户端脚本语言,请注意大小有区别,面向对象。javascript用途很多的,目前几乎所有主流浏览器都支持。但是他有一个坏处就是变量,如var i=4;这个i就是int类型的,var s="hello",这个s是字符串类型的,并且,在上面声明了一个变量同时也在下面声明了一个和上面相同变量名的变量,这时,javascript不会错,他就用你在最后声明的那个变量,所以,用的时候注意大小写和避免相同的变量名。

1。html文件,五个区域,每点击一个区域时让他调用一个javascript函数,并给他传参数

<link id="classskin" href="style/s2.css" rel="stylesheet" type="text/css" />

<div class="pagebody">
<ul id="change_theme">
   <li id="skincss1" οnclick="skin(1)"><a title="白色天使" href="#"> </a></li>
   <li id="skincss2" οnclick="skin(2)"><a title="默认皮肤" href="#"> </a></li>
   <li id="skincss3" οnclick="skin(3)"><a title="绿色心情" href="#"> </a></li>
   <li id="skincss4" οnclick="skin(4)"><a title="深蓝彩虹" href="#"> </a></li>
   <li id="skincss5" οnclick="skin(5)"><a title="粉色玫瑰" href="#"> </a></li>
  
</ul>
</div>

2。javascript函数skin,接收一个参数。

function skin(s){
   for(var i=1;i<6;i++){
    if(document.getElementById("skincss"+i))
     document.getElementById("skincss"+i).className="";
   }
document.getElementById ("skincss"+s).className ="current";
document.getElementById("classskin").href= "style/s"+s+".css";
setCookie("sdid",s,1);
}

3。设置Cookie函数setCookie接收三个参数,第一个参数名称,第二个参数值,第三个参数时间。

function setCookie(c_name,value,expiredays){
//创建一个时间对象
var exdate=new Date();
//setDate函数设置一个月的某一天
//exdate设置成当前的月份的某一天在加上所调用函数的参数expiredays

exdate.setDate(exdate.getDate()+expiredays);
//设置Cookie的值,整个过程就像x=1;y=2的样子
//escape对value进行编码,((expiredays==null) ? "" : ";expires="看似很难,理解很OK的,如果
//expiredays的值为空,那么此语句就输出“""”,空的。什么都没有,如果expiredays的值不为空,那么就
//此语句就输出“;expires=”,toGMTString函数根据格林威治时间 (GMT) 把 exdate 对象转换为字符串,和函数toUTCString()功能一样.
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
//alert('set欢迎您'+value+'!');
}

4。获取Cookie函数getCookie,应函数接收一个参数名称,并返回相应名称的值

function getCookie(c_name){
//检查 document.cookie 对象中是否存有 cookie
if(document.cookie.length>0){
   //指定的字符串值在字符串中首次出现的位置
   c_start=document.cookie.indexOf(c_name + "=");
//如果要检索的字符串值没有出现,则该方法返回 -1,所以这里设置为不等于-1,那么就是说已检索的字符串值的位置
  
if(c_start!=-1){
   
//c_start等于所在字符串位置的值加上c_name的长度加1,为什么要加1?因为indexOf上面函数检索c_name的位置是c_name
    //的位置,而所需要的是在c_name后面的位置.在php记得有个函数据功能和indexOf类似,但是返回的值不用在加1就可以
    c_start=c_start + c_name.length+1
  
//从document.cookie对象中从c_start开始检索":"的第一个位置
   
c_end=document.cookie.indexOf(";",c_start)
   //如果没有出现c_end
  
if (c_end==-1){
   
//把document.cookie对象的长度赋值给c_end
    c_end=document.cookie.length;
    }

    //返回,unescape() 函数可对通过 escape() 编码的字符串进行解码
    //substring() 函数用于提取字符串中介于两个指定下标之间的字符
    //在document.cookie对象中从c_start开始起不包括c_start检索到c_end中间的值
    //alert('欢迎您get'+c_name+'!');

    return unescape(document.cookie.substring(c_start,c_end));
    }
}
//返回空字符串
return "";
}

5。应用函数checkCookie

function checkCookie(){
//定义一个变量csslink并且调用getCookie,getCookie返回一个值
var csslink=getCookie("sdid");
//如果csslink不是空和不是空字符串
if(csslink!=null && csslink!=""){
   document.getElementById ("skincss"+csslink).className ="current";
   document.getElementById("classskin").href= "style/s"+csslink+".css";
}else{

  
//消息框输入框得到csslink
  
csslink=1;
  
//如果csslink不是空和不是空字符串
   if(csslink!=null && csslink!=""){
    //调用函数设置Cookie
       setCookie("sdid",csslink,1)
    }
}
}

工作流程:首先你要确保你页面载入时有没有调用别的javascript函数,如果有,你调用的函数里加入checkCookie();就可以,如果没有,那就在你的网页HTML 标签如:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>中加入οnlοad="checkCookie();"就可以,调用checkCookie的时候他先调用getCookie并返回一个值来检查是否有Cookie,如果没有就调用setCookie函数设置Cookie,并设置你默认的Cookie名称和值及Cookie生命时间,如果Cookie已有。那么执行document.getElementById ("skincss"+csslink).className ="current"; 和document.getElementById("classskin").href= "style/s"+csslink+".css";skincss是html里标签的ID前缀,csslink是调用getCookie取得的一个数,classskin是一个外部连接css的ID,总的就是取得Cookie的一个数做为一个改变html标签里的样式以及改变外部连接的css。。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值