jQuery cookie保存背景颜色+字体颜色和字体特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery cookie保存背景颜色+字体颜色和字体特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!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=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<style type="text/css">
body{font-size:14px;}
div{margin:20px;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
#content{width:500px;margin:0 auto;
border:#CCC 1px solid}
#content p{text-indent:2em;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
var options = {path: '/', expires: 10};			//定义路径，过期时间为10天
var cookie_backColor = $.cookie("backColor");	//定义背景颜色值
var cookie_fontColor = $.cookie("fontColor");	//定义字体颜色值
var cookie_fontSize = $.cookie("fontSize");		//定义字体大小

//如果cookie里有背景颜色、字体颜色、字体大小，就加载相应属性。
$(function(){
	if(cookie_backColor){
		$('body').css('background', cookie_backColor);
	}
	if(cookie_fontColor){
		$('#content').css('color', cookie_fontColor);
	}
	if(cookie_fontSize){
		$('#content').css('font-size', cookie_fontSize + 'px');
	}
});

//背景颜色方法
function backcolor(num){
	if(num == 1){
		$("body").css('background','#E6FBEA');		//改变背景颜色
		$.cookie("backColor", "#E6FBEA", options);	//把背景颜色值传进"backColor"这个cookie里
	}
	if(num == 2){
		$("body").css('background','#D8ECED');
		$.cookie("backColor", "#D8ECED", options);
	}
	if(num == 3){
		$("body").css('background','#FDFCEA');
		$.cookie("backColor", "#FDFCEA", options);
	}
	if(num == 4){
		$("body").css('background','#EFEFEF');
		$.cookie("backColor", "#EFEFEF", options);
	}
}

//字体颜色方法
function fontcolor(num){
	if(num == 1){
		$("#content").css('color','#f00');		//改变字体颜色
		$.cookie("fontColor", "#f00", options);	//把字体颜色值传进"fontColor"这个cookie里
	}
	if(num == 2){
		$("#content").css('color','#ff0');
		$.cookie("fontColor", "#ff0", options);
	}
	if(num == 3){
		$("#content").css('color','#00f');
		$.cookie("fontColor", "#00f", options);
	}
	if(num == 4){
		$("#content").css('color','#0f0');
		$.cookie("fontColor", "#0f0", options);
	}
}

//字体大小方法
function fontsize(num){
	switch(num){
		case 1:
			$("#content").css('font-size','12px');	//改变字体大小
			$.cookie("fontSize", "12", options);	//把字体大小值传进"fontSize"这个cookie里
			break;
		case 2:
			$("#content").css('font-size','14px');
			$.cookie("fontSize", "14", options);
			break;
		case 3:
			$("#content").css('font-size','16px');
			$.cookie("fontSize", "16", options);
			break;
		case 4:
			$("#content").css('font-size','18px');
			$.cookie("fontSize", "18", options);
			break;
	}
}

//恢复默认方法
function defaultCL(){
	$("body").css('background','');			//清空背景颜色
	$.cookie("backColor", null, options);	//把背景颜色空值传进"backColor"这个cookie里
	$("#content").css('color','');			//清空字体颜色
	$.cookie("fontColor", null, options);	//把字体颜色空值传进"fontColor"这个cookie里
	$("#content").css('font-size','');		//清空字体大小
	$.cookie("fontSize", null, options);	//把字体大小空值传进"fontSize"这个cookie里
}
</script> 

</head>

<body style="text-align:center">

<h2><a href="#" target="_blank">jQuery cookie保存背景颜色、字体颜色和字体大小</a></h2> 
<div class="backColor">
	背景颜色：
	<a title="青山不老" onclick="backcolor(1)" href="javascript:void(0);">青</a>、
	<a title="蓝色回忆" onclick="backcolor(2)" href="javascript:void(0);">蓝</a>、
	<a title="明黄清俊" onclick="backcolor(3)" href="javascript:void(0);">黄</a>、
	<a title="灰色世界" onclick="backcolor(4)" href="javascript:void(0);">灰</a>
</div>
<div class="fontColor">
	字体颜色：
	<a onclick="fontcolor(1)" href="javascript:void(0);">红</a>、
	<a onclick="fontcolor(2)" href="javascript:void(0);">黄</a>、
	<a onclick="fontcolor(3)" href="javascript:void(0);">蓝</a>、
	<a onclick="fontcolor(4)" href="javascript:void(0);">绿</a>
</div>
<div class="fontSize">
	字体大小：
	<a onclick="fontsize(1)" href="javascript:void(0);">12px</a>、
	<a onclick="fontsize(2)" href="javascript:void(0);">14px</a>、
	<a onclick="fontsize(3)" href="javascript:void(0);">16px</a>、
	<a onclick="fontsize(4)" href="javascript:void(0);">18px</a>
</div>
<div class="default">
	<a onclick="defaultCL()" href="javascript:void(0);">恢复默认</a>
</div>
<div id="content">
<p>“三皇子到！”小太监的叫驾声打断了我们的讨论。</p>
<p>蓝凌枫？他来干什么？！对这家伙我是一向不怎么欢迎的，一直闹着要退婚要抛弃我的家伙，见他一次我就“受伤”一次！</p>
<p>“好香的味道！”蓝凌枫很享受的伸长鼻子闻着。</p>
<p>属狗的么？！鼻子这么灵（小雨：拜托，有可能闻不到么？除了嗅觉有问题的人）！</p>
<p>“奴才……”正想行礼的三人，被蓝凌枫扬手打断，“你们继续。”</p>
<p>“谢三皇子！”</p>
</div>
</body>
</html>

JS代码(jquery.cookie.js):

/*jslint browser:true */
 /*global jQuery:true */
/** * jQuery Cookie plugin * * Copyright (c) 2010 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */
// TODO JsDoc/** * Create a cookie with the given key and value and other optional parameters. * * @example $.cookie('the_cookie','the_value');
	* @desc Set the value of a cookie. * @example $.cookie('the_cookie','the_value',{
	expires:7,path:'/',domain:'jquery.com',secure:true}
);
	* @desc Create a cookie with all available options. * @example $.cookie('the_cookie','the_value');
	* @desc Create a session cookie. * @example $.cookie('the_cookie',null);
	* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain * used when the cookie was set. * * @param String key The key of the cookie. * @param String value The value of the cookie. * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. * If a negative value is specified (e.g. a date in the past),the cookie will be deleted. * If set to null or omitted,the cookie will be a session cookie and will not be retained * when the the browser exits. * @option String path The value of the path atribute of the cookie (default:path of page that created the cookie). * @option String domain The value of the domain attribute of the cookie (default:domain of page that created the cookie). * @option Boolean secure If true,the secure attribute of the cookie will be set and the cookie transmission will * require a secure protocol (like HTTPS). * @type undefined * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */
/** * Get the value of a cookie with the given key. * * @example $.cookie('the_cookie');
	* @desc Get the value of a cookie. * * @param String key The key of the cookie. * @return The value of the cookie. * @type String * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */
jQuery.cookie = function (key,value,options){
	// key and value given,set cookie... if (arguments.length > 1 && (value === null || typeof value !== "object")){
	options = jQuery.extend({
}
,options);
	if (value === null){
	options.expires = -1;
}
if (typeof options.expires === 'number'){
	var days = options.expires,t = options.expires = new Date();
	t.setDate(t.getDate() + days);
}
return (document.cookie = [ encodeURIComponent(key),'=',options.raw ? String(value):encodeURIComponent(String(value)),options.expires ? ';
	expires=' + options.expires.toUTCString():'',// use expires attribute,max-age is not supported by IE options.path ? ';
	path=' + options.path:'',options.domain ? ';
	domain=' + options.domain:'',options.secure ? ';
	secure':'' ].join(''));
}
// key and possibly options given,get cookie... options = value ||{
}
;
	var result,decode = options.raw ? function (s){
	return s;
}
:decodeURIComponent;
	return (result = new RegExp('(?:^|;
	)' + encodeURIComponent(key) + '=([^;
	]*)').exec(document.cookie)) ? decode(result[1]):null;
}
;

附件:下载该文件资源,减少时间成本(增值服务)