网页换肤代码

最新推荐文章于 2022-12-27 16:40:31 发布
最新推荐文章于 2022-12-27 16:40:31 发布
阅读量910 收藏 2
点赞数
分类专栏： 前端js

关于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 
              >
Return_KB
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery四色网页换肤代码
05-23
jquery四色网页换肤代码
前端搜索高亮、富文本去标签、时间格式化、手机号码验证、关键信息脱敏
Lccccb的博客
12-29 297
搜索高亮 newsData.filter(item => { let reg = new RegExp(inputStr, 'g')// 匹配关键字正则 let replaceString = `<span style="color: #4D8FF2;">${this.inputStr}</span>` // 高亮替换v-html值 item.title = item.title.replace(reg, replaceString) // 开始替换 return
html中线段高亮效果,【前端技术】vue使用v-html实现一段字符串中关键字（词）高亮效果...
weixin_39928106的博客
06-03 554
问题描述需求：我们搜索某个关键字，后端返回给我们一个字符串，这个字符串中包含我们搜索的关键字，我们需要把这个字符串中的关键字部分加上高亮效果(类似于百度搜索关键字高亮的效果)。我们先看一下，大致类似的效果图：如上图所示，需求很简单，就是关键字高亮。思路分析解决方式有两种，第一种就是进行字符串的切割，把关键字切出来，加上一个颜色。这种方式上一篇文章关于字符串的方法整理的文章已经说过了，不赘述，详情可...
网页换肤的N种方案
lingxiaoxi_ling的博客
04-29 2669
原文demo链接地址 网页换肤的N种方案 最近在做网站换肤的需求，也就是主题切换。那么如何切换主题的颜色呢？以下是网站换肤的实现以及基于换肤拓展的一些方案分享给大家，希望大家在做类似需求的时候能够有些参考。 覆盖样式实现 // light $color-brand1: #ffcd32; $fill-1: #fff !default; $color-text: #3c3c3c; $c...
网页换肤
sunny_Destiny的博客
11-03 430
网页换肤 今天我们来实现网页换肤的效果，就如同平时我们给自己的QQ换背景，体验不同的感觉，首先，我们先来看一下效果图。 皮肤1 皮肤2 接下来我们来分析一下代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
网站换肤
花花的博客
06-01 599
效果图可选框是一张背景图片，通过定位显示不同颜色和对号1、jsvar color=["#9e9e9e",'#b2d600','#f8b646','#08bece','#e3165c','#bb3bd9'];//把颜色按顺序存在数组里$('#skin-ul li').on('click',function () { //点击li时 给当前li添加class（‘’active‘’） 兄弟移除c...
jquery四色网页换肤代码.zip
07-04
jquery四色网页换肤代码
jQuery之网页换肤实现代码
10-28
用jQuery做网页换肤确实是很一个很巧妙，很好的选择，这是本人在学习jQuery中学的知识，感觉很有用，写了下来，希望大家有更好的方法或者代码不足的地方请谅解，本人也是初学者啊，希望大家互相勉励互相学习。
js特效脚本含源码和说明jquery四色网页换肤代码
最新发布
03-31
js特效脚本含源码和说明jquery四色网页换肤代码本资源系百度网盘分享地址
网页换肤JS
07-25
网页换肤JS，自己用的，很好用，看看吧！
网页页面换肤功能实现
08-14
用js以及jQuery实现的网页换肤功能，有选择存储功能，替换标签和样式即可
js实现简单的网页换肤效果
11-27
中心思想：网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤计入Cookie中，这样用户已下次访问时，就可以显示用户自定义皮肤了 步骤： 1.在设计HTML代码时，用了一些小技巧，就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。 2.HTML结构要有一个带id的样式表链接，通过操作该链接的herf属性的值，从而实现换肤 <link rel="stylesheet" href="css/skin_0.css" id="cssfile"/> 3. 根据当前的li的id，通过attr（）方法为<link>元素
网页换肤（DIV+CSS）
04-02
实现网页的皮肤更换 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0036)http://radio.fc510.com/code/chgskin/ --> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>换肤测试程序</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css>.themes { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid } </STYLE> <SCRIPT language=javascript type=text/javascript> <!-- var arrCSS=[ ["<img src='images/ocean.gif' width='16' height='8' class='themes' alt='Ocean'>","css/ocean.css"], ["<img src='images/tangerine.gif' width='16' height='8' class='themes' alt='Tangerine'>","css/tangerine.css"], ["<img src='images/violet.gif' width='16' height='8' class='themes' alt='Violet'>","css/violet.css"], ["<img src='images/oyster.gif' width='16' height='8' class='themes' alt='Oyster'>","css/oyster.css"], ["<img src='images/grass.gif' width='16' height='8' class='themes' alt='Grass'>","css/grass.css"], "" ];
网页样式和换肤的简单实现(原创 附代码)
07-29
网页样式和换肤的简单实现(原创 附代码) 网页样式和换肤的简单实现(原创 附代码) 网页样式和换肤的简单实现(原创 附代码) 认为分高的可以去我的空间：http://hi.baidu.com/tangxiucai2 免费，里面有源码。
【JS实现网页换肤】
m0_46312303的博客
08-06 1251
JS实现网页换肤
写一个简单的浏览器页面换肤的代码
奕白尘的博客
04-27 388
今天我们来学习一下一个页面的换肤操作，也可以说是换背景。 1.新建一个HTML文档，先把选择的框架写出来，效果如下： 正在上传…重新上传取消 正在上传…重新上传取消 鼠标右键用浏览器打开，上面的点击色块，那就说明完成了框架搭建，我们接着下面的代码。 正在上传…重新上传取消 正在上传…重新上传取消 我现在用的是比较方便的for循环代码，这个循环是比较方便的。返回浏览器刷新，再次点击色块，这样就有效果了。图片如上： 上面的是简单的，我们再换一种方法，接下来的方法就麻烦一点了，我这边呢是比较推
java web换肤_框架页面的换肤实现
weixin_36338808的博客
02-24 227
换肤原理,准备N套皮肤CSS,放在webroot/css/red/test.css, webroot/css/blue/test.css……程序员只需要通过Cookie来控制red, blue这里的目录,将这里目录变成变量即可,单页面通过DOM操作Link即可实现,框架页面同样,通过递归即可实现全站换肤,以下为JS代码Java代码 /*保存Cookiec_name--keyvalue---val...
html下拉列表+网页更换背景实现的换肤功能
weilaaer的博客
12-27 1082
利用之前做的登陆页面：用html实现一个静态登陆页面-可根据需求更改样式按钮图标我们去inconfont上找一个自己喜欢的，iconfont上可以找到各种适应于自己项目的小图标，很推荐使用。下载图片放入到自己能通过路径访问到的地方（我这里为了方便就直接放入到网页文件同一目录当中）。 壁纸需要用于更换的下载自己喜欢的壁纸就行了。 我们在页面的右上角放上一个图片按钮用于打开我们的下拉列表。 在没有点击按钮之前，下拉列表是隐藏的，有需要用到display:none这个样式，在点击之后，利用js将display:n
html代码背景换肤功能
03-29
HTML代码实现背景换肤功能需要借助CSS样式表和JavaScript脚本。 1. 在HTML文件中插入以下代码，用于控制页面主体内容： ``` <!-- 页面主体内容 --> ``` 2. 在CSS样式表中定义不同主题的样式，如下所示： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值