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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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
功能强大的php文件上传类
2016/08/29 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python os.access()用法实例
2019/02/18 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
python中if嵌套命令实例讲解
2021/02/25 Python
大学生简单自荐信
2013/11/10 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
教师学习培训邀请函
2014/02/04 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
人力资源部岗位职责
2015/02/11 职场文书
消费者理赔投诉书
2015/07/02 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python