方形幸运转盘

最新推荐文章于 2023-04-30 21:40:25 发布

alo_ne

最新推荐文章于 2023-04-30 21:40:25 发布

阅读量158

点赞数

分类专栏： js-案例

本文链接：https://blog.csdn.net/alo_ne/article/details/106584571

版权

js-案例专栏收录该内容

25 篇文章 0 订阅

订阅专栏

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #uls {
            width: 500px;
            height: 500px;
            margin: 50px auto;
        }

        li {
            width: 150px;
            height: 150px;
            background: skyblue;
            float: left;
            list-style: none;
            margin: 5px;
            color: #fff;
            text-align: center;
            line-height: 150px;
            font-size: 20px;
            font-weight: bold;
        }

        #uls li button {
            width: 50px;
            height: 30px;
        }

        .light {
            width: 150px;
            height: 150px;
            background: #666;
            color: #fff;
        }
    </style>

<body>
    <ul id='uls'>
        <li>600元优惠券</li>
        <li>800元优惠券</li>
        <li>1000元优惠券</li>
        <li>800元优惠券</li>
        <li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li>
        <li>600元优惠券</li>
        <li>600元优惠券</li>
        <li>1000元优惠券</li>
        <li>800元优惠券</li>
    </ul>
    <script>

        //技术难点 由于转盘不是按照li标签的顺序执行的 所以需要建立一个新的数组 存放需要转动的数组，   然后定义一个便=变量 让其自加 
        let alli = document.querySelectorAll('li')
        var btn1 = document.querySelector(" #btn1");
        var btn2 = document.querySelector(" #btn2");
        let arr = [0, 1, 2, 5, 8, 7, 6, 3]
        let num = 0
        let cal = ''
        alli[0].classList.add('light')
        btn1.onclick = function () {
            //在内部封装一个函数 用来启动定时器时候赋值给定时器
            function go() {
                // 进来之前把已经转过的li清空
                btn1.disabled = true;
                alli[arr[num]].classList.remove('light')
                num++
                if (num > arr.length - 1) num = 0 //判断当num超过数组的长度 让他归0
                alli[arr[num]].classList.add('light')
            }
            cal = setInterval(go, 50)  //清空定时器

        }
        btn2.onclick = function () {
            btn1.disabled = false;
            clearInterval(cal)
        }

    </script>
</body>

alo_ne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
方形幸运转盘

<style> * { padding: 0; margin: 0; } #uls { width: 500px; height: 500px; margin: 50px auto; } li { width: 150px; height:...
复制链接

扫一扫