cookie记忆换肤功能实战Demo

最新推荐文章于 2019-06-29 14:16:04 发布

weixin_33872566

最新推荐文章于 2019-06-29 14:16:04 发布

阅读量188

点赞数

文章标签： javascript ViewUI

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jQuery换肤+cookie记忆功能</title>
   <link rel="stylesheet" href="../css/style.css" media="screen" />
   <link rel="stylesheet" href="../css/reset.css" media="screen" />
   <link rel="stylesheet" href="../css/green.css" media="screen" name="skin" />

   <script src="../jquery-1.10.2.min.js"></script>
   <script src="../jquery.cookie.js"></script>
</head>
<body>
   <div id="wrapper">
       <h1>jQuery Playground</h1>
       <div id="stylechange" class="clear">
           <ul>
               <li><a href="javascript:void(0)" class="green"></a></li>
               <li><a href="javascript:void(0)" class="blue"></a></li>
           </ul>
       </div>
       <ul id="nav">
           <li><a href="index.html" class="current">测试</a></li>
           <li><a href="#">关于</a></li>
       </ul>
       <div id="content">
           <h2>WelCome!</h2>
           <p>Hello，everyone.I will share some useful tips of jQuery here.</p>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
       </div>
       <div id="footer">Powered By Dennis Ji.</div>
   </div>
</body>
<script>
   $(function(){

       var favstyle = readCookie('style');//style是cookie的名字
       console.log(favstyle);//../css/green.css上次定义的绿色或蓝色皮肤在这里得到了输出
       if(favstyle){
           $("link[name='skin']").attr({href:favstyle});
       }
       //绿色主题
       $(".green").click(function(){
           $("link[name='skin']").attr({href:"../css/green.css"});
           createCookie('style',"../css/green.css",365);
       });
       //蓝色主题
       $(".blue").click(function(){
           $("link[name='skin']").attr({href:"../css/blue.css"});
           createCookie('style',"../css/blue.css",365);
       });

       //下面是jQuery版本(注意：要写在$(function(){})里面)的的创建、读取、删除cookie
       function createCookie(name,value,days){
           var expires;
           if (days) {
               expires = days;
           } else{
               expires = "";
           }
           $.cookie(name,value,{expires:expires,path:'/'});
       }
       function readCookie(name){
           var styles = $.cookie(name);//jQuery的cookie只用这样写就能读出cookie的值了
           return styles;
       }
       function delCookie(name){
           $.cookie(name,null)
       }
       //注：本地cookie的读取要用localhost才能读取，普通的无服务器的文件路径是读取不到的
   });

</script>
</html>