利用cookie记住背景颜色示例代码


Posted in Javascript onNovember 04, 2013
<!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> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script> 
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script> 
<style type="text/css"> 
#p1{ background-color:Red ; width:40px; border:solid 1px yellow ; margin:5px; float:left} 
#p2{background-color:Yellow ;width:40px; border:solid 1px red; margin:5px; float:left} 
#p3{background-color:Blue;width:40px; border:solid 1px yellow; margin:5px; float:left} 
</style> 
<script type="text/javascript"> 
$(function () { 
if ($.cookie("bgcolor")) { 
$("body").css("background-color", $.cookie("bgcolor")); 
} $("p").click(function () { 
$("body").css("background-color", $(this).css("background-color")); 
$.cookie("bgcolor", $("body").css("background-color"), { expires: 7 }); 
}) 
}) 
</script> 
</head> 
<body> 
<p id="p1">红色</p><p id="p2">黄色</p><p id="p3">蓝色</p> 
</body> 
</html>
Javascript 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
jquery禁用右键示例
Apr 28 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
angular之ng-template模板加载
Nov 09 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
判断滚动条到底部的JS代码
Nov 04 #Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 #Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 #Javascript
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
浅析return false的正确使用
Nov 04 #Javascript
You might like
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
Python输出9*9乘法表的方法
2015/05/25 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
介绍一下游标
2012/01/10 面试题
助学感谢信范文
2015/01/21 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers