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 相关文章推荐
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 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
SMARTY学习手记
2007/01/04 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php连接mysql数据库
2017/03/21 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
理解javascript异步编程
2016/01/27 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python实现Event回调机制的方法
2019/02/13 Python
在django模板中实现超链接配置
2019/08/21 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
开会迟到检讨书
2014/02/03 职场文书
大学生毕业求职信
2014/06/12 职场文书
道德模范事迹材料
2014/12/20 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
贷款工作证明模板
2015/06/12 职场文书
运动会宣传稿100字
2015/07/23 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
python 闭包函数详细介绍
2022/04/19 Python