JS：随机女友_DOM练习题

最新推荐文章于 2024-10-01 20:12:28 发布
红嘴-蓝鹊
最新推荐文章于 2024-10-01 20:12:28 发布
阅读量1k
点赞数 1
分类专栏： JS基础文章标签： javascript css html
本文链接：https://blog.csdn.net/weixin_48475463/article/details/122887270
版权
JS基础专栏收录该内容
28 篇文章 1 订阅
订阅专栏
<!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;
        }

        body {
            background-color: aqua;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .wrapper {
            width: 800px;
            border: 1px solid #000;
            overflow: hidden;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 5px;
        }

        .boxImg {
            width: 100%;
            height: 400px;
            background-color: aquamarine;
        }

        .btn_img {
            width: 100%;
            height: 100px;
            display: flex;
        }

        .btn_img>li {
            flex-grow: 1;
            border: 1px solid #000;
            margin: 2px;
        }

        li img {
            width: 100%;
            height: 100%;
        }

        #btn1,
        #btn2 {
            width: 100%;
            height: 50px;
            margin-top: 5px;
            background-color: pink;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- <div class="boxImg" style="background:url(./imgs/liqin.jpg) 0% 0% / 100% 100% no-repeat;"></div> -->
        <div class="boxImg"></div>
        <ul class="btn_img">
            <!-- 
            <li><a><img src="./imgs/liqin.jpg" alt=""></a></li>
            <li><a><img src="./imgs/dli.jpg" alt=""></a></li>
            <li><a><img src="./imgs/OIP-C.jpg" alt=""></a></li>
            <li><a><img src="./imgs/R-C.jpg" alt=""></a></li> 
            -->
        </ul>

        <button id="btn1">更换背景</button>
        <button id="btn2">随机抽取女朋友</button>
    </div>

    <script>
        var arr1 = [
            "https://tse1-mm.cn.bing.net/th/id/R-C.64b01f810e4e40cbc8d244da7ae45fdb?rik=Ntngk7M8H%2bx6Vg&riu=http%3a%2f%2fi.52desktop.cn%3a81%2fupimg%2fallimg%2f20180108%2f201818125622343778035.jpg&ehk=AipWKJEW%2bGf%2ffvUUAqGP234kKFoT%2bt5GltPOp5PDHYk%3d&risl=&pid=ImgRaw&r=0",
            "https://tse1-mm.cn.bing.net/th/id/R-C.c41cf9d057f91ae854d98b4820f2c24c?rik=ojoiPE4jNqcDmA&riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2f3f03e3bcbf6ab8b2617c8189eb9e08bd6a0958cb.jpg&ehk=CQBLBP4O1Nsm%2fwlbBWaouCJmt%2fk2TqICScDrBMrc3NE%3d&risl=&pid=ImgRaw&r=0",
            "https://tse1-mm.cn.bing.net/th/id/R-C.f35e127f931fdcd6871af33247ea281e?rik=pHdobCNbK9Qzzg&riu=http%3a%2f%2fwww.hy9.org%2fnxda%2fshow_pic.php%3fsrc%3d201209%2f20120929095129202.jpg&ehk=GbmIh1Dgb1CbkzoaNo9n0SrE0cKf8vjv60jj9utYnXs%3d&risl=&pid=ImgRaw&r=0",
            "https://tse1-mm.cn.bing.net/th/id/R-C.65e306bfecd4fa7dbbfd1d0e4f6534e7?rik=rd4bP9nHxrqKMg&riu=http%3a%2f%2fup.deskcity.org%2fpic_source%2f65%2fe3%2f06%2f65e306bfecd4fa7dbbfd1d0e4f6534e7.jpg&ehk=Olsxx6HZzEloI0JDIYuttsZvUxC20fxKdKDjyeX7nfQ%3d&risl=&pid=ImgRaw&r=0"
        ]

        var arr2 = [
            "https://www.biaoqingb.com/uploads/img1/20200222/3530b92dbd3ba4179e4268f46824a031.jpg",
            "https://tse1-mm.cn.bing.net/th/id/R-C.d24834655eaa3289cbebfadb5f907fe2?rik=hl%2fSUtAMEXPwzg&riu=http%3a%2f%2fwww.tupian1.cn%2fuploads%2fallimg%2f150130%2f1-150130221510910.jpg&ehk=CukW3dW9PWsRw3e%2f%2bYGwJ8UYM9JjSnqbukjeC3WgV8E%3d&risl=&pid=ImgRaw&r=0",
            "https://tse1-mm.cn.bing.net/th/id/R-C.d815cb9a3348ae0ffcf5bb3ab903137b?rik=h8R1xgxWTbDAlg&riu=http%3a%2f%2fwww.qubiaoqing.cn%2fpic%2f2020%2f12%2f08%2fcfyzai0qfce.jpg&ehk=sJ5XsMmg%2b9aqyGLd5SftxtAyI4osLijDnBEbDDN%2bwF8%3d&risl=&pid=ImgRaw&r=0",
            "https://www.jjcnc.com/uploads/allimg/180325/3-1P325112946347.jpg"
        ]

        var boxImg = document.querySelector('.boxImg')
        var btn_img = document.querySelector('.btn_img')

        /* 动态添加缩略图li */
        function renderThumbnail() {
            var str = ''
            arr1.forEach(item => {
                var li = `<li><a><img src="${item}" alt=""></a></li>`

                str += li
            });
            btn_img.innerHTML = str
        }
        renderThumbnail()

        /* 更换背景图 */
        var currentBgIndex = 0
        function setBgimg(index, imgs = arr1) {
            boxImg.style.background = `url(${imgs[index]}) 0% 0% / 100% 100% no-repeat`
            currentBgIndex = index
            console.log(currentBgIndex);
        }

        /*  随机切换一张大图 */
        function switchRandomImg(imgs = arr1) {
            var rand = parseInt(imgs.length * Math.random())
            // console.log(rand);

            while (rand === currentBgIndex) {
                rand = parseInt(imgs.length * Math.random())
            }

            // 将背景图切换为arr中的对应序号的图片
            // boxImg.style.background = `url(${arr1[rand]}) 0% 0% / 100% 100% no-repeat`

            setBgimg(rand, imgs)
        }

        /* 默认显示第一张图片 */
        // boxImg.style.background = `url(${arr1[0]}) 0% 0% / 100% 100% no-repeat`
        setBgimg(currentBgIndex)

        /* 点击缩略图切换大图 */
        var lis = document.querySelectorAll('.btn_img>li')
        // 遍历所有的li
        lis.forEach(
            function (item, index) {
                //给每个li增加点击事件
                item.onclick = function () {
                    // 将背景图切换为arr中的对应序号的图片
                    boxImg.style.background = `url(${arr1[index]}) 0% 0% / 100% 100% no-repeat`
                }
            }
        )

        /* 点击更换背景 生成随机序号 */
        var btn1 = document.querySelector('#btn1')
        btn1.onclick = function () {
            switchRandomImg()
        }

        /* 随机抽取女朋友 */
        var btn2 = document.querySelector('#btn2')
        var timer = null
        btn2.onclick = function () {
            if (!timer) {
                switchRandomImg()
                timer = setInterval(
                    function () {
                        switchRandomImg()
                    },
                    1000
                )
                btn2.innerText = '点击停止，获得女友联系电话！'
            } else {
                clearInterval(timer)
                timer = null
                btn2.innerText = '随机抽取女朋友'

                switchRandomImg(arr2)
            }
        }
    </script>
</body>

</html>
效果图：