js实现随机抽对象

需求： 点击抽取对象 每隔10ms 切换一张图片显示 图片随机显示  等待3s后 图片停止切换

            注意：javascript里所需要的getRandom这个封装好的函数在之前的文章中发布过，如果需要请自取

 <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            width: 450px;
            height: 450px;
            border: 1px solid darkcyan;
            margin: 50px auto;
        }

        ul li {
            width: 150px;
            height: 150px;
            border: 1px solid darkcyan;
            float: left;
            box-sizing: border-box;
        }

        ul li img {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        ul div {
            float: left;
            width: 150px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            background-color: darkcyan;
            color: #fff;
            font-size: 18px;
        }
    </style>

 <ul>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F17%2F20180217135131_kUPXk.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757870&t=f770aa0632fe18f8d1b4b411e26c622e"
                alt=""></li>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F4ff0a000gy1gsik8tniywj20j60nyjtc.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757870&t=c103d53a90de44ea7b75708a7826d68a"
                alt=""></li>
        <li><img src="https://pic.rmb.bdstatic.com/57bb1c9d1b6b9c352e62d4a2be2a81ac.jpeg@wm_2,t_55m+5a625Y+3L+avj+aXpeaYjuaYn+aXtuWwmg==,fc_ffffff,ff_U2ltSGVp,sz_51,x_32,y_32"
                alt=""></li>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn18%2F590%2Fw590h800%2F20180606%2F4e6b-hcqccip4771222.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757996&t=2d77604f5e5f87866abfe7ceb2cb7a68"
                alt=""></li>
        <div>给同桌抽对象</div>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F83f39c87ly1gshqo69jf4j20qo14q0wi.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757996&t=ecac2780d9813ac936d6592bed673cfb"
                alt=""></li>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fspider20191227%2F201%2Fw1080h721%2F20191227%2Fd315-imfiehq9331171.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757996&t=e71a81479403444cf0ca65917a5424a0"
                alt=""></li>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F669%2Fw640h829%2F20190421%2FeaMU-hvvuiyn4619647.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757996&t=0564e9ee9a4c8cb2318c8fdf56e35397"
                alt=""></li>
        <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F006HICtMly1gss1vmw9vgj30ps0vp448.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631757870&t=938dccde956305b549d2d5663578c939"
                alt=""></li>
    </ul>

 <script>
        /* 
            点击抽取对象 每隔10ms 切换一张图片显示 图片随机显示  等待3s后 图片停止切换
        */
        //    1. 获取元素
        var div = document.getElementsByTagName('div')[0];
        var imgs = document.getElementsByTagName('img');
        console.log(div, imgs);
        // 唯一标识
        var t = null;
        // 2. 添加事件
        div.onclick = function () {
            // 3. 每隔10ms 切换一张图片显示
            t = setInterval(function () {
                // 4. 随机图片 -- 随机下标 -- 取随机数 0--长度
                var n = getRandom(0, imgs.length);
                console.log(n);
                // 5. 显示图片 下标n对应的元素 opacity变成1
                // 6. 排他
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].style.opacity = '0';
                }
                imgs[n].style.opacity = '1';
               
            }, 10);
             // 7.等待3s后 图片停止切换
             setTimeout(function(){
                    // 8. 清除定时器
                    clearInterval(t);
                },3000);
        };
    </script>