javascript实现网页背景的切换

Author：孙肖宁
发布时间：April 2, 2018
6301 views
No comments
828 words
Categories：编程语言

描述：当用户点击背景的时候，背景进行切换
示例代码：(图片换成自己的路径哦)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皮肤更换</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background: url("./images/1.jpg") no-repeat;
    }
    .box{
        height: 165px;
        padding-top: 35px;
        text-align: center;
        background: rgba(255,255,255,0.3);
    }
    img{
        width: 200px;
        cursor: pointer;
        margin: 0 10px;
    }
</style>
<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
        <img src="./images/5.jpg" alt="">
    </div>
</body>
</html>
<script>
    var box = document.getElementsByTagName("div")[0];
    var body = document.body;
    var imgArr = box.children;
    for (var i = 0;imgArr.length;i++){
        imgArr[i].index = i;
        imgArr[i].onclick = function () {
            body.style.backgroundImage = "url("+this.src+")";
        }
    }
</script>

Last modification：April 2, 2018