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中的deferred对象和extend方法详解
May 08 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
Jquery Datatables的使用详解
Jan 30 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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
javascript 函数式编程
2007/08/16 Javascript
js 内存释放问题
2010/04/25 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Python实现购物车购物小程序
2018/04/18 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
python中remove函数的踩坑记录
2021/01/04 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
财务管理职业生涯规划书
2014/02/26 职场文书
中国入世承诺
2014/04/01 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
外国人来华邀请函
2015/01/31 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
我收到了德劲DE1107
2022/04/05 无线电