网页换肤
浏览数：22 /
时间：2015年06月09日
1.网页换肤的实现，其实就是两个css的切换！本文用到的技术是cookie，不过，从个人的想法来说，我还是觉得直接用数据库挺好的，在用户后面加一个CSS的属性，然后，每次登陆后，直接通过js进行设置！先看一下效果图：
2.简单说明一下：
首先,写两个CSS。当点击橙色经典或者灰色畅想的时候，在js中对<link >的href进行设置！
其次,设置完CSS后，用户退出客户端后，下次再次浏览的时候，发现以前设置的肤色又不存在了，所以，把CSS的路径放入的cookie,当下次浏览页面的时候，直接从cookie中读取！
3.JavaScript实现
HTML页面：
1 <table id="TableLeft"> 2 <tr> 3 <td>更换网页风格：<a onclick="change(‘orange‘);return false">[橙色经典]</a><a onclick="change(‘gray‘);return false">[灰色畅想]</a></td> 4 </tr> 5 <tr> 6 <table class="SaleTable"> 7 <tr> 8 <td><a href="#" class="music">MP3－精选专辑（111首歌曲）</a></td> 9 </tr> 10 <tr style="color: black"> 11 <td>市场价<font color="red">28</font>元 会员价：<font color="red">20</font>元 VIP价：<font color="red">10</font>元</td> 12 </tr> 13 <tr > 14 <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td> 15 </tr> 16 <tr style="color: gray"> 17 <td>经典...</td> 18 </tr> 19 </table> 20 </tr> 21 <tr> 22 <table class="SaleTable"> 23 <tr> 24 <td><a href="#" class="music">MP3－精选专辑（111首歌曲）</a></td> 25 </tr> 26 <tr style="color: black"> 27 <td>市场价：<font color="red">28</font>元 会员价：<font color="red">20</font>元 VIP价：<font color="red">10</font>元</td> 28 </tr> 29 <tr> 30 <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td> 31 </tr> 32 <tr style="color: gray"> 33 <td>经典...</td> 34 </tr> 35 </table> 36 </tr> 37 </table>
JavaScript效果：
1 <link id="myCss" rel="stylesheet" type="text/css"> 2 <script type="text/javascript"> 3 4 //页面刚加载完成的时候，从cookie中读取cssPath（css的路径）,如果没有，则往cookie中设置一个默认路径。 5 window.onload=function(){ 6 if(readCookie("cssPath")==undefined){ 7 console.info(readCookie("cssPath")); 8 writeCookie("CSS/Color/orange.css"); 9 } 10 document.getElementById("myCss").href=readCookie("cssPath"); 11 } 12 13 //往cookie中写路径 14 function writeCookie(csspath){ 15 var today = new Date(); 16 var expires = new Date(); 17 expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天 18 19 //document.cookie=‘cssPath=路径;expires=过期时间‘<=> 设置cssPath的过期时间 20 var str ="cssPath="+encodeURI(csspath)+";expires="+encodeURI(expires.toUTCString()); 21 document.cookie=str; 22 } 23 24 //读取cookie 25 function readCookie(cookieName){ 26 var search = cookieName +"="; 27 if(document.cookie.length>0){ 28 //获得cookieName=出现的位置，本例是cssPath=,如果返回-1说明没有出现过,此时给他一个默认的CSS路径 29 offset=document.cookie.indexOf(search); 30 if(offset!=-1){ 31 //cssPath=值，因为我们要获取的是cssPath的值，也就是=以后的内容到‘;‘之间的值 32 offset+=search.length; 33 34 //indexOf(searchString, startPosition)从startPosition开始，搜寻searchString字符串，返回的是searchString第一次出现的位置 35 //本例是获得从offset开始，第一次出现;的位置因为cssPath的值在 cssPath= 和 ; 之间 36 end=document.cookie.indexOf(";",offset); 37 38 //substring(offset,end) 截取从offset开始，到end结束的字符串。 39 return decodeURI(document.cookie.substring(offset, end)); 40 }else{ 41 return "CSS/Color/orange.css"; 42 } 43 } 44 } 45 46 47 //点击事件 48 function change(type){ 49 if(type=="orange"){ 50 document.getElementById("myCss").href="CSS/Color/orange.css"; 51 writeCookie("CSS/Color/orange.css") 52 } 53 54 if(type=="gray"){ 55 document.getElementById("myCss").href="CSS/Color/gray.css"; 56 writeCookie("CSS/Color/gray.css") 57 } 58 } 59 </script>
4.JQueyr实现
1 <table id="TableLeft"> 2 <tr> 3 <td>更换网页风格：<a class="colorA">[橙色经典]</a><a class="colorA">[灰色畅想]</a></td> 4 </tr> 5 <tr> 6 <table class="SaleTable"> 7 <tr> 8 <td><a href="#" class="music">MP3－精选专辑（111首歌曲）</a></td> 9 </tr> 10 <tr style="color: black"> 11 <td>市场价<font color="red">28</font>元 会员价：<font color="red">20</font>元 VIP价：<font color="red">10</font>元</td> 12 </tr> 13 <tr > 14 <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td> 15 </tr> 16 <tr style="color: gray"> 17 <td>经典...</td> 18 </tr> 19 </table> 20 </tr> 21 <tr> 22 <table class="SaleTable"> 23 <tr> 24 <td><a href="#" class="music">MP3－精选专辑（111首歌曲）</a></td> 25 </tr> 26 <tr style="color: black"> 27 <td>市场价：<font color="red">28</font>元 会员价：<font color="red">20</font>元 VIP价：<font color="red">10</font>元</td> 28 </tr> 29 <tr> 30 <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td> 31 </tr> 32 <tr style="color: gray"> 33 <td>经典...</td> 34 </tr> 35 </table> 36 </tr> 37</table>
1 <link id="myCss" rel="stylesheet" type="text/css"> 2 <script type="text/javascript" src="JS/jquery-1.8.2.js"></script> 3 <script type="text/javascript" src="JS/jquery.cookie.js"></script> 4 <script type="text/javascript"> 5 $(function(){ 6 window.onload=function(){ 7 var cssPathValue=$.cookie("cssPath"); 8 if(cssPathValue==$.cookie("not_existing")){ 9 $.cookie("cssPath","CSS/Color/orange.css",{expires:30}); 10 } 11 $("#myCss").attr("href",$.cookie("cssPath")); 12 }; 13 $(".colorA").click(function(){ 14 var value = $(this).text(); 15 if(value=="[橙色经典]"){ 16 $("#myCss").attr("href","CSS/Color/orange.css"); 17 $.cookie("cssPath","CSS/Color/orange.css",{expires:30}); 18 }else{ 19 $("#myCss").attr("href","CSS/Color/gray.css"); 20 $.cookie("cssPath","CSS/Color/gray.css",{expires:30}); 21 } 22 return false; 23 }); 24 }); 25 </script>
注意：
JQueyr实现cookie，需要引入插件jquery.cookie.js！
参考：
《java web开发实战1200例 (第一卷)》
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
