jQuery通过写入cookie实现更换网页背景的方法


Posted in Javascript onApril 15, 2016

本文实例讲述了jQuery通过写入cookie实现更换网页背景的方法。分享给大家供大家参考,具体如下:

<!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>jquery更换网页背景(写入cookie)</title>
<style type="text/css">
 body,p,ul{margin:0;padding:0;}
 ul{float:right;height:40px;margin-top:20px;margin-right:20px;}
 ul li{list-style-type:none;float:left;width:20px;height:20px;margin-left:10px;cursor:pointer;}
 .skin{height:40px;position:fixed;background:#fff;border-bottom:solid 1px #cccc;top:0;left:0;width:100%;}
 .red{background:#F06;}/*红色*/
 .black{background:#000;}/*黑色*/
 .blue{background:#09F;}/*蓝色*/
 .green{background:#093;}/*绿色*/
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
   //为了安全 google chrome 等浏览器是禁止本地文件写Cookie的即file:///F:/Lord%20community/lrtk/Untitled-2.html这样的以file开头的是不能写本地文件的
   var cookieClass = getCookie('class');//读取需要缓存的对象。
   $("body").attr("class",cookieClass);//
   $(".skin_list li").each(function(){
     $(this).click(function(){       
       var className=$(this).attr("class");//保存当前选择的类名
       $("body").attr("class",className,30);//把选中的类名给body
       function SetCookie(name,value,day)//两个参数,一个是cookie的名子,一个是值
       {
        var exp = new Date(); //new Date("December 31, 9998");
        exp.setTime(exp.getTime() + day*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
       }
       SetCookie("class",className,30);
     })
    });
   });
   function getCookie(name)//取cookies函数  
   {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1,c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
   }
</script>
</head>
<body>
<div class="skin"><ul class="skin_list"><li style="width:100px;text-align:right;">更换背景:</li></li><li class="red"></li><li class="black"></li><li class="blue"></li><li class="green"></li></ul></div>
</body>
</html>

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

Javascript 相关文章推荐
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
javascript中如何判断类型汇总
May 14 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 #Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 #Javascript
jQuery中的基本选择器用法学习教程
Apr 14 #Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 #Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 #Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 #Javascript
You might like
PDO::commit讲解
2019/01/27 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
js动态引入的四种方法
2018/05/05 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
解决Python使用列表副本的问题
2019/12/19 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
财会自我鉴定范文
2013/12/27 职场文书
大学新生欢迎词
2014/01/10 职场文书
九年级政治教学反思
2014/02/06 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
服务员岗位职责范本
2015/04/09 职场文书
教师远程研修感悟
2015/11/18 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书