jQuery基于cookie实现换肤功能实例


Posted in jQuery onOctober 14, 2017

本文实例讲述了jQuery基于cookie实现换肤功能。分享给大家供大家参考,具体如下:

换肤,在你使用QQ、浏览器、酷狗等软件时,总是能看到这两个字(也有叫皮肤)。不过换肤的确能解决很多人的口味,换肤看似一个无关紧要的功能,但其实能起到吸引用户的作用。好啦,话不多说,开始上课。

附上本人的代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie的使用</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style>
.huanFu{
  float:right;
}
.huanFu ul li{
  width:30px;height:30px;
  list-style:none;
  margin:0 5px;
  float:left;
  cursor:pointer;
  border:1px solid #000;
}
.fu1{background-color:#F00;}
.fu2{background-color:#0F0;}
.fu3{background-color:#00F;}
.fu4{background-color:#FF0;}
.huanFu ul li.select{border:3px solid #000;margin-top:-3px;}
</style>
<script>
$(function(){
  var cookieClass=getCookie('class');//读取本地的Cookie
  if(cookieClass){
    $("body").attr("class",cookieClass);//把页面的背景恢复成Cookie保存的颜色
  }else{
    $("body").attr("class","fu1");
  }
  $(".huanFu ul li").on("click",function(){
    $(this).addClass("select").siblings().removeClass("select");//标示出选中的样式
    var fuName=$(this).attr("fuName");//取得class名。讲解:起了一个fuName属性,在里面存了fu1,现在取出来而已
    $("body").attr("class",fuName);//改变body的class属性来达到背景换色的效果
    function SetCookie(name,value,day){//三个传值,名字、值、保存天数
      var exp = new Date();//取得本机当前时间(含日期)
      exp.setTime(exp.getTime() + day*24*60*60*1000);//把天数变成毫秒保存起来
      document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();//以name=fu1;expires=Date {Thu Jun 26 2014 23:23:25 GMT+0800}这一长串的字符串保存到本机的cookie中
    }
    SetCookie("class",fuName,7);//设置Cookie过程
  });
  function getCookie(name){//读取本地的Cookie过程
    var nameTit=name+"=";//此时的name值就是"class",nameTit="class="
    var ca=document.cookie.split(';');//读取本地cookie的内容是"xxx.xxx;xxx.xxx",所以我们去掉';'后,它会以数组的形式保存入ca内。
    for(var i=0;i<ca.length;i++){//循环ca数组
      var c=ca[i];
      while(c.charAt(0)==' '){//如果开头第一个字符是空格的话,读取就从第二位到最后一位
        c=c.substring(1,c.length);
      }
      if(c.indexOf(nameTit)==0){//判断是否存在,并是否第一位开始的"class="
        return c.substring(nameTit.length,c.length);//取得class=fu1中的"fu1"
      }
      return null;
    }
  }
});
</script>
</head>
<body class="fu1">
  <div class="huanFu">
    <ul>
      <li class="fu1" fuName="fu1"></li>
      <li class="fu2" fuName="fu2"></li>
      <li class="fu3" fuName="fu3"></li>
      <li class="fu4" fuName="fu4"></li>
    </ul>
  </div>
</body>
</html>

把上面的代码看懂后,再copy到你编辑软件中查看效果。点击右上角的颜色块,页面的背景色变成了颜色块对应的颜色,然后关闭你的浏览器,再次打开这个页面,是不是惊奇的发现,颜色就是你上次关闭浏览器的颜色。我在代码中都加上了相应的注释,别看script代码长,其实很容易理解,就是利用浏览器的cookie保存你的值,实现时刻记录你的颜色选择。

在下一篇文章中,我们会使用cookie.js插件,来实现换肤功能。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
jQuery自动或手动图片切换效果
Oct 11 #jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
jQuery中extend函数简单用法示例
Oct 11 #jQuery
You might like
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php的4种常见运行方式
2015/03/20 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
简单介绍Python中的round()方法
2015/05/15 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python for i in range ()用法详解
2020/09/18 Python
python3注册全局热键的实现
2020/03/22 Python
浅谈Python 参数与变量
2020/06/20 Python
利用python 读写csv文件
2020/09/10 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
公务员的自我鉴定
2013/10/26 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
《雾凇》教学反思
2014/02/17 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
通信工程专业求职信
2014/06/04 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
整改报告格式
2014/11/06 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
复试通知单模板
2015/04/24 职场文书
《花钟》教学反思
2016/02/17 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis