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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript div 弹出可拖动窗口
Feb 26 Javascript
javascript string字符串优化问题
Jul 31 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
原生js实现日期选择插件
May 21 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
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
javascript中的面向对象
2017/03/30 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
关于vue面试题汇总
2018/03/20 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python3生成随机数实例
2014/10/20 Python
浅析Python中的多重继承
2015/04/28 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
村级换届选举方案
2014/05/10 职场文书
企业挂职心得体会
2014/09/10 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
农村文化建设标语
2014/10/07 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
Golang入门之计时器
2022/05/04 Golang