ページの皮膚交換機能の浅い分析

原理:クッキーとdom操作によって異なるスタイルシートファイルを呼び出すことによってフロントの肌交換を実現する.Htmlコード部分: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.アクセスクッキー

//     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==-1){

                skin=0;//             

        }

        else{

                var start=mycookie.indexOf("=",start1)+1;

                var end=mycookie.indexOf(";",start);

                if(end=-1){

                        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();//      

}