网页换肤代码

最新推荐文章于 2024-09-22 13:54:07 发布
Return_KB
最新推荐文章于 2024-09-22 13:54:07 发布
阅读量946
点赞数
分类专栏：前端js
前端js 专栏收录该内容
39 篇文章 0 订阅
订阅专栏
关于localStorage用法可以参阅localStorage一章节。
下面分享一段简单的代码实例，它实现了利用localStorage进行换肤的效果。
代码如下:
     
     
      
      
       
       
        
         
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
            
              27 
             
            
              28 
             
            
              29 
             
            
              30 
             
            
              31 
             
            
              32 
             
            
              33 
             
            
              34 
             
            
              35 
             
            
              36 
             
            
              37 
             
            
              38 
             
            
              39 
             
            
              40 
             
            
              41 
             
            
              42 
             
            
              43 
             
            
              44 
             
            
              45 
             
            
              46 
             
            
              47 
             
            
              48 
             
            
              49 
             
            
              50 
             
            
              51 
             
            
              52 
             
            
              53 
             
            
              54 
             
            
              55 
             
            
              56 
             
             
              
              <!DOCTYPE html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              > 
              
              
              < 
              title 
              > 
              网页换肤代码 
              </ 
              title 
              > 
              
              
              < 
              style 
              > 
              
              
              *{ 
              
              
                 
              margin: 0; 
              
              
                 
              padding: 0; 
              
              
              } 
              
              
              body{ 
              
              
                 
              background-color: #000; 
              
              
              } 
              
              
              ul{ 
              
              
                 
              width: 500px; 
              
              
                 
              margin: 100px auto; 
              
              
              } 
              
              
              li{ 
              
              
                 
              list-style: none; 
              
              
                 
              float: left; 
              
              
                 
              width: 50px; 
              
              
                 
              height: 50px; 
              
              
                 
              border: 5px solid #fff; 
              
              
                 
              border-radius: 50%; 
              
              
                 
              margin: 0 10px; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
              < 
              ul 
              > 
              
              
                 
              < 
              li 
              ></ 
              li 
              > 
              
              
                 
              < 
              li 
              ></ 
              li 
              > 
              
              
                 
              < 
              li 
              ></ 
              li 
              > 
              
              
                 
              < 
              li 
              ></ 
              li 
              > 
              
              
                 
              < 
              li 
              ></ 
              li 
              > 
              
              
              </ 
              ul 
              > 
              
              
              </ 
              body 
              > 
              
              
              < 
              script 
              > 
              
              
              var colors=['red','green','orange','lightblue','blue']; 
              
              
              var lis=document.querySelectorAll('li'); 
              
              
              for(var i=0;i< 
              lis.length 
              ;i++){ 
              
              
                 
              lis[i] 
              .style.background 
              = 
              colors 
              [i]; 
              
              
                 
              lis[i] 
              .index 
              =i; 
              
              
                 
              lis[i] 
              .onclick 
              = 
              function 
              (){ 
              
              
                   
              document.body.style.background 
              = 
              colors 
              [this.index]; 
              
              
                   
              /*将当前的颜色存储起来*/ 
              
              
                   
              localStorage.setItem('bgc',colors[this.index]); 
              
              
                 
              } 
              
              
                 
              /*当页面打开时，颜色是之前关闭前设置的颜色*/ 
              
              
                 
              window.onload 
              = 
              function 
              (){ 
              
              
                   
              document.body.style.background 
              = 
              localStorage 
              .getItem('bgc'); 
              
              
                 
              } 
              
              
              } 
              
              
              </script> 
              
              
              </ 
              html 
              >