js实现幸运大转盘

需求:
        用点击事件等相关知识点完成幸运大转盘,页面打开,出现九宫格蓝色色块;
        色块内分别是奖品,当点击开始按钮时,有一个灰色色块开始转动;
        点击停止按钮时,灰色按钮停在哪里,就表示所中的奖品是什么.
如下图:

html部分:

<div class="container">
        <div index_roll="1">600元优惠券</div>
        <div index_roll="2">800元优惠券</div>
        <div index_roll="3">1000元优惠券</div>
        <div index_roll="0">800元优惠券</div>
        <div index_roll="8">
            <button>开始</button>
            <button>停止</button>
        </div>
        <div index_roll="4">600元优惠券</div>
        <div index_roll="7">600元优惠券</div>
        <div index_roll="6">1000元优惠券</div>
        <div index_roll="5">800元优惠券</div>
    </div>

css部分:

* {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 50px auto;
            width: 500px;
            height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

        .container>div {
            width: 150px;
            height: 150px;
            background-color: skyblue;
            color: #ffffff;
            text-align: center;
            line-height: 150px;
        }

        button {
            width: 60px;
            height: 30px;
        }

js部分:

var divs = document.querySelectorAll(".container>div")
        var btns = document.querySelectorAll(".container>div>button");

        var timeId = null;
        var index = 0;
        btns[0].onclick = function () {
            clearInterval(timeId);
            timeId = setInterval(() => {
                for (var j = 0; j < divs.length; j++) {
                    divs[j].style.backgroundColor = "skyblue";
                }
                for (var i = 0; i < divs.length; i++) {
                    if (Number(divs[i].getAttribute("index_roll")) == index%8) {
                        divs[i].style.backgroundColor = "grey";
                        break;
                    }
                }
                index++;
            }, 60);
        }
        btns[1].onclick= function () {
            clearInterval(timeId)
        }

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值