利用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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
JS定义类的六种方式详解
May 12 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
原生JavaScript实现幻灯片效果
Feb 19 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
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue的mixins属性详解
2018/03/14 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
详解Python中的Descriptor描述符类
2016/06/14 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python实现代码统计程序
2019/09/19 Python
Python input函数使用实例解析
2019/11/22 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
详解python变量与数据类型
2020/08/25 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
大学生求职简历的自我评价
2013/10/14 职场文书
跟单文员岗位职责
2014/01/03 职场文书
高中校园广播稿
2014/01/11 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
珍惜水资源建议书
2014/03/12 职场文书
埃及王子观后感
2015/06/16 职场文书