jQuery中怎么基于cookie实现换肤功能
jQuery中怎么基于cookie实现换肤功能
这篇文章主要介绍“jQuery中怎么基于cookie实现换肤功能”，在日常操作中，相信很多人在jQuery中怎么基于cookie实现换肤功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery中怎么基于cookie实现换肤功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>cookie的使用</title><scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><style>.huanFu{float:right;}.huanFuulli{width:30px;height:30px;list-style:none;margin:05px;float:left;cursor:pointer;border:1pxsolid#000;}.fu1{background-color:#F00;}.fu2{background-color:#0F0;}.fu3{background-color:#00F;}.fu4{background-color:#FF0;}.huanFuulli.select{border:3pxsolid#000;margin-top:-3px;}</style><script>$(function(){varcookieClass=getCookie('class');//读取本地的Cookieif(cookieClass){$("body").attr("class",cookieClass);//把页面的背景恢复成Cookie保存的颜色}else{$("body").attr("class","fu1");}$(".huanFuulli").on("click",function(){$(this).addClass("select").siblings().removeClass("select");//标示出选中的样式varfuName=$(this).attr("fuName");//取得class名。讲解:起了一个fuName属性,在里面存了fu1,现在取出来而已$("body").attr("class",fuName);//改变body的class属性来达到背景换色的效果functionSetCookie(name,value,day){//三个传值,名字、值、保存天数varexp=newDate();//取得本机当前时间(含日期)exp.setTime(exp.getTime()+day*24*60*60*1000);//把天数变成毫秒保存起来document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();//以name=fu1;expires=Date{ThuJun26201423:23:25GMT+0800}这一长串的字符串保存到本机的cookie中}SetCookie("class",fuName,7);//设置Cookie过程});functiongetCookie(name){//读取本地的Cookie过程varnameTit=name+"=";//此时的name值就是"class",nameTit="class="varca=document.cookie.split(';');//读取本地cookie的内容是"xxx.xxx;xxx.xxx",所以我们去掉';'后，它会以数组的形式保存入ca内。for(vari=0;i<ca.length;i++){//循环ca数组varc=ca[i];while(c.charAt(0)==''){//如果开头第一个字符是空格的话，读取就从第二位到最后一位c=c.substring(1,c.length);}if(c.indexOf(nameTit)==0){//判断是否存在,并是否第一位开始的"class="returnc.substring(nameTit.length,c.length);//取得class=fu1中的"fu1"}returnnull;}}});</script></head><bodyclass="fu1"><divclass="huanFu"><ul><liclass="fu1"fuName="fu1"></li><liclass="fu2"fuName="fu2"></li><liclass="fu3"fuName="fu3"></li><liclass="fu4"fuName="fu4"></li></ul></div></body></html>
把上面的代码看懂后，再copy到你编辑软件中查看效果。点击右上角的颜色块，页面的背景色变成了颜色块对应的颜色，然后关闭你的浏览器，再次打开这个页面，是不是惊奇的发现，颜色就是你上次关闭浏览器的颜色。我在代码中都加上了相应的注释，别看script代码长，其实很容易理解，就是利用浏览器的cookie保存你的值，实现时刻记录你的颜色选择。
到此，关于“jQuery中怎么基于cookie实现换肤功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！
