原生JS制作抽奖小游戏

<div class="box">
    <div id="grid1" class="grid">电信优惠卷</div>
    <div id="grid2" class="grid">谢谢惠顾</div>
    <div id="grid3" class="grid">奖品3</div>
    <div id="grid8" class="grid">奖品8</div>
    <div class="grid">
        <button id="btn" onclick="clickStart()">开始抽奖</button>
    </div>
    <div id="grid4" class="grid">奖品4</div>
    <div id="grid7" class="grid">奖品7</div>
    <div id="grid6" class="grid">奖品6</div>
    <div id="grid5" class="grid">奖品5</div>
    <audio src=""></audio>
</div>
<h1 id="info"></h1>
function clickStart(){
            //1. 只要开始抽奖就应该把之前的所有光全部移除掉
            for(let i = 1; i < 9; i++){
                document.getElementById('grid' + i).style.backgroundColor = '';
            }//清空所有光标
            //2. 点击多次产生多个定时器,每次开始就禁用按钮
            document.getElementById('btn').disabled = true;

            //模拟与服务器通信,拿到后台返回的中奖索引(产生1-8)
            let starIndex = Math.floor(Math.random() * 8) + 1;

            let id = 1  
            let count = 0   //已经跑过的轮数
            //启动一个定时器,开始跑灯
            let timer = setInterval(() => {
                let grid = document.getElementById('grid' + id);
                // 获取1个DOM元素,改变背景色or边框
                grid.style.backgroundColor = 'tomato'; // 给格子加背景色,表示亮灯
                // 清除掉上一轮的格子颜色!!!如果是第一个格子,直接清除第八个,否则-1取上一个
                document.getElementById('grid' + (id==1 ? 8: id-1) ).style.backgroundColor = '';
                
                //当前跑动到第四轮,并且id==中奖id 停止
                if(count == 3 && id == starIndex){
                    //已经在第四轮的转动中并且当前转动的格子ID === 中奖格子ID
                    clearInterval(timer);
                    //设置奖品信息到文本中
                    document.getElementById('info').innerHTML += '中奖信息:' + grid.innerHTML;
                    //让按钮可以再次点击
                    document.getElementById('btn').disabled = false;
                    return
                }

                //每取一次id +1
                id++  //9
                //id尾界判断,因为总共只有8个格子
                if(id > 8){
                    id = 1 ; //已经到了第八个格子,重新从第一个开始
                    count++ ; //轮数+1
                }
            }, 200)
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值