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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
js实现图片360度旋转
2017/01/22 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python实现周期方波信号频谱图
2018/07/21 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
python绘制雷达图实例讲解
2021/01/03 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
活动总结格式
2014/08/30 职场文书
银行贷款收入证明
2014/10/17 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js