利用cookie实现保存背景颜色+js
贴上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>change skin via setCookie </title> 6 <style> 7 body,p,ul{margin:0;padding:0;} 8 ul{float:right;height:40px;margin-top:20px;margin-right:20px;} 9 ul li{list-style-type:none;float:left;width:20px;height:20px;margin-left:10px;cursor:pointer;} 10 .skin{height:40px;position:fixed;background:#fff;border-bottom:solid 1px #cccc;top:0;left:0;width:100%;} 11 .red{background:#F06;}/*红色*/ 12 .black{background:#000;}/*黑色*/ 13 .blue{background:#09F;}/*蓝色*/ 14 .green{background:#093;}/*绿色*/ 15 </style> 16 <script> 17 function creatCookie(name,value,days){ 18 if(days){ 19 var date = new Date(); 20 date.setTime(date.getTime()+(days*24*60*60*1000)); 21 var expires = ";expires="+date.toGMTString(); 22 } 23 else{ 24 var expires = ""; 25 } 26 document.cookie = name+"="+value+expires; 27 } 28 29 function readCookie(name){ 30 var nameEQ = name+"="; 31 var ca = document.cookie.split(";"); 32 for(var i =0;i<ca.length;i++){ 33 var c = ca[i]; 34 while(c.charAt(0) == " "){ 35 c = c.slice(1,c.length); 36 } 37 if(c.indexOf(nameEQ) == 0){ 38 return c.slice(nameEQ.length,c.length); 39 } 40 } 41 return null; 42 } 43 44 function switchskin(value){ 45 document.getElementsByTagName("body")[0].setAttribute("class",value); 46 document.getElementsByTagName("body")[0].setAttribute("className",value); 47 creatCookie("class",value,30); 48 } 49 function load(){ 50 var cookieValue = readCookie('class'); 51 document.getElementsByTagName("body")[0].setAttribute("class",cookieValue); 52 document.getElementsByTagName("body")[0].setAttribute("className",cookieValue); 53 } 54 </script> 55 </head> 56 <body onload="load();"> 57 <div class="skin"> 58 <ul> 59 <li onclick = "switchskin('white')" style = "width:100px;text-align:right; " class="">change skin</li> 60 <li onclick = "switchskin('red')" class = "red"></li> 61 <li onclick = "switchskin('green')" class = "green"></li> 62 <li onclick = "switchskin('blue')" class = "blue"></li> 63 </ul> 64 </div> 65 </body> 66 </html>
参考了：http://quirksmode.org/js/cookies.html
http://www.dayday28.com/changeSkin
自己改成了用JS实现，mark一下
