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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
javascript操作referer详细解析
Mar 10 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
解析Angular 2+ 样式绑定方式
Jan 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
js自定义回调函数
2015/12/13 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python版本的仿windows计划任务工具
2018/04/30 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
创建精神文明单位实施方案
2014/03/08 职场文书
静心口服夜广告词
2014/03/20 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
六五普法宣传标语
2014/10/06 职场文书
2015年推普周活动方案
2015/05/06 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
宣传稿格式范文
2015/07/23 职场文书
七年级思品教学反思
2016/02/20 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android