html下拉列表+网页更换背景实现的换肤功能

Love The Way You Lie 2023-10-03 22:36 5阅读 0赞

利用之前做的登陆页面：[用html实现一个静态登陆页面-可根据需求更改样式][html_-]

##### 一、准备按钮图标和背景图片 #####

按钮图标我们去[inconfont][]上找一个自己喜欢的，iconfont上可以找到各种适应于自己项目的小图标，很推荐使用。下载图片放入到自己能通过路径访问到的地方（我这里为了方便就直接放入到网页文件同一目录当中）。  
壁纸需要用于更换的下载自己喜欢的壁纸就行了。  
![在这里插入图片描述][5e11fa4a04ea4056874bf9f03c0693fb.png]

##### 二、页面中加入可更换壁纸的下拉列表 #####

我们在页面的右上角放上一个图片按钮用于打开我们的下拉列表。  
在没有点击按钮之前，下拉列表是隐藏的，有需要用到display:none这个样式，在点击之后，利用js将display:none这个样式取消掉。  
效果如下：  
![在这里插入图片描述][4d3941b1378044a3b8911f5041d4907d.png]  
![在这里插入图片描述][13e9c9c2dbd948cfac967030e7c313f4.png]

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
          
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            li {
          
                list-style-type: none;
            }
    
            body {
          
                background: url('./bgc1.png') no-repeat;
                background-size: 100%;
                font-family: '宋体';
            }
    
            a {
          
                text-decoration: none;
            }
    
            .login {
          
                width: 500px;
                height: 300px;
                background-color: rgba(150,143,172,0.3);
                margin: 150px 100px;
                text-align: center;
                padding: 30px;
                border-radius: 20px;
                box-shadow: 2px 2px 5px #000; /*阴影效果*/
            }
    
            .fstInput, .sndInput {
          
                width: 250px;
                height: 25px;
                color: rgb(61,54,64);
                text-align: center;
                outline: none;
                margin: 15px;
                background-color: rgba(0, 0, 0, 0.0);
                border: 0;
                border-bottom: 2px solid black;
                transition: 1s; /*宽度变化的过度时间*/
            }
    
            /* 过度动画，点击输入账号密码框之后会使输入框的下边框扩大 */
            .fstInput:focus, .sndInput:focus {
          
                width: 300px;
                border-bottom: 2px solid gray;
            }
    
            .register {
          
                display: block;
                margin-top: 10px;            
            }
    
            .btn {
          
                width: 100px;
                height: 30px;
                border-radius: 15px;
                border: 0;
                background-color: rgb(153,139,152);
            }
    
            .changeWallpaper {
          
                position: fixed;
                right: 0;
                top: 0;
            }
    
            .changeWallpaper .img-open-ul img{
          
                width: 35px;
                height: 35px;
                position: fixed;
                right: 0;
            }
            
            .changeWallpaper .ul {
          
                margin-top: 40px;
                /* display: none; */
                transition: 0.5s;
                
            }
    
            .changeWallpaper ul li img{
          
                width: 200px;
                height: 100px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="changeWallpaper">
            <div class="img-open-ul">
                <img src="./wallpaper.png" alt="" onclick="openChange()">
            </div>
            <div class="ul" style="display: none;">
                <ul>
                    <li><img onclick="changePaper(0)" src="bgc.png" alt=""></li>
                    <li><img onclick="changePaper(1)" src="bgc1.png" alt=""></li>
                    <li><img onclick="changePaper(2)" src="bgc2.png" alt=""></li>
                    <li><img onclick="changePaper(3)" src="bgc3.png" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="login">
            <form action="">
                <h2>遇事不决，可问春风</h2>
                <span><input class="fstInput" type="text" placeholder="请输入账号"></span><br>
                <span><input class="sndInput" type="password" placeholder="请输入密码"></span><br>
                <span class="register">还没有账号？<a href="">立即注册</a></span><br>
                <span><input class="btn" type="button" value="登陆"></span>
            </form>
        </div>
    
        <script>
            var images = ["./bgc.png", "./bgc1.png", "./bgc2.png", "./bgc3.png"]
            function openChange() {
          
    
                var ul = document.querySelector(".ul");
                if (ul.style.display === "none") {
          
                    ul.style.display = ""
                } else {
          
                    ul.style.display = "none"
                }
                
            }
    
            function changePaper(index) {
          
                document.body.style.cssText =  'background: url(' + this.images[index] + ') no-repeat; background-size: 100%; font-family: ' + '宋体;'
            }
        </script>
    </body>
    </html>

##### 三、问题说明 #####

在使用js代码来控制样式时，例如document.body.style.background = …  
这样修改的样式会是行内样式，定义在body \{\} 里面的样式没有被修改，行内样式优先级大于类样式，当两种样式同时带有url时，会优先使用行内样式，所以我最后选择使用document.body.style.cssText，来直接把body所携带的样式的内容全部修改。以便产生不必要的麻烦。

[html_-]: https://blog.csdn.net/weilaaer/article/details/128430550?spm=1001.2014.3001.5501
[inconfont]: https://www.iconfont.cn/
[5e11fa4a04ea4056874bf9f03c0693fb.png]: https://img-blog.csdnimg.cn/5e11fa4a04ea4056874bf9f03c0693fb.png
[4d3941b1378044a3b8911f5041d4907d.png]: https://img-blog.csdnimg.cn/4d3941b1378044a3b8911f5041d4907d.png
[13e9c9c2dbd948cfac967030e7c313f4.png]: https://img-blog.csdnimg.cn/13e9c9c2dbd948cfac967030e7c313f4.png