<html>
<HEAD><TITLE>jQuery cookie保存背景顏色、字體顏色和字體大小</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<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;}
#content p{text-indent:2em;}
</STYLE>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="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里有背景顏色、字體顏色、字體大小，就加載相應(yīng)屬性。
$(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); //把背景顏色值傳進(jìn)"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); //把字體顏色值傳進(jìn)"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); //把字體大小值傳進(jìn)"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;
}
}
//恢復(fù)默認(rèn)方法
function defaultCL(){
$("body").css('background',''); //清空背景顏色
$.cookie("backColor", null, options); //把背景顏色空值傳進(jìn)"backColor"這個cookie里
$("#content").css('color',''); //清空字體顏色
$.cookie("fontColor", null, options); //把字體顏色空值傳進(jìn)"fontColor"這個cookie里
$("#content").css('font-size',''); //清空字體大小
$.cookie("fontSize", null, options); //把字體大小空值傳進(jìn)"fontSize"這個cookie里
}
</SCRIPT>
</HEAD>
<BODY style="BACKGROUND: #fdfcea" onclick="">
<H2>jQuery cookie保存背景顏色、字體顏色和字體大小</H2>
<DIV class=backColor>背景顏色： <A title=青山不老 onclick=backcolor(1) href="javascript:void(0);">青</A>、 <A title=藍(lán)色回憶 onclick=backcolor(2) href="javascript:void(0);">藍(lán)</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);">藍(lán)</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);">恢復(fù)默認(rèn)</A> </DIV>
<DIV style="FONT-SIZE: 12px" id=content>
<P>“三皇子到！”小太監(jiān)的叫駕聲打斷了我們的討論。</P>
<P>藍(lán)凌楓？他來干什么？！對這家伙我是一向不怎么歡迎的，一直鬧著要退婚要拋棄我的家伙，見他一次我就“受傷”一次！</P>
<P>“好香的味道！”藍(lán)凌楓很享受的伸長鼻子聞著。</P>
<P>屬狗的么？！鼻子這么靈（小雨：拜托，有可能聞不到么？除了嗅覺有問題的人）！</P>
<P>“奴才……”正想行禮的三人，被藍(lán)凌楓揚(yáng)手打斷，“你們繼續(xù)?！?font color="blue"></P>
<P>“謝三皇子！”</P></DIV></BODY>
</html>
聯(lián)系客服
