利用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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序实现多行文字滚动
Nov 18 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Python装饰器结合递归原理解析
2020/07/02 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
建设投标担保书
2014/05/13 职场文书
经理任命书模板
2014/06/06 职场文书
2014年度工作总结报告
2014/12/15 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
i7 6700处理器相当于i5几代
2022/04/19 数码科技