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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
javascript表单正则应用
2017/02/04 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
微信小程序 rich-text的使用方法
2017/08/04 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Python subprocess模块学习总结
2014/03/13 Python
从零学Python之入门(四)运算
2014/05/27 Python
Python的Django框架中的Context使用
2015/07/15 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
5款实用的python 工具推荐
2020/10/13 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
网络技术专业推荐信
2014/02/20 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
火箭队口号
2014/06/18 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
《为人民服务》教学反思
2016/02/20 职场文书