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遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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操作JSON格式数据的实现代码
2011/12/24 PHP
php获取操作系统语言代码
2013/11/04 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python中Genarator函数用法分析
2015/04/08 Python
Python脚本处理空格的方法
2016/08/08 Python
Python切片工具pillow用法示例
2018/03/30 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
办公室文秘自我评价
2013/09/21 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
疾病捐款倡议书
2014/05/13 职场文书
2014年政协工作总结
2014/12/09 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle