原生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 === 中奖格子IDclearInterval(timer);//设置奖品信息到文本中document.getElementById('info').innerHTML += '中奖信息：' + grid.innerHTML;//让按钮可以再次点击document.getElementById('btn').disabled = false;return}//每取一次id +1id++  //9//id尾界判断，因为总共只有8个格子if(id > 8){id = 1 ; //已经到了第八个格子，重新从第一个开始count++ ; //轮数+1}}, 200)}

原生JS制作抽奖小游戏相关推荐

如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
使用 cocos creator 3.0 制作抽奖小游戏
使用 cocos creator 3.0 制作抽奖小游戏描述一个抽奖小游戏demo, 点击抽奖按钮进行抽奖, 抽完奖后该结果置灰.下一次抽奖就会跳过已经抽过的奖项. 注意: 每次点击抽奖按钮 ...
android 数字滚动抽奖_2020年会必备，Excel轻松制作抽奖小游戏
不知不觉就到了年底,新的一年即将从明天开始.时光流逝,不禁让人感慨万千. 当然在这个时间大家应都在期待着年终奖.年会吧.今天我想和大家分享一个Excel制作的抽奖小游戏,可以一次抽一人也可以一次抽多人 ...
利用js实现抽奖小游戏
这次依然是大大的js干货,不知道大家有没有看到过类似下面这种抽奖小游戏: 这种小游戏实现的原理是什么呢?我们该怎样使用学习过的js知识来实现这个小游戏呢?你别一看到"利用js实现游戏&quo ...
原生js 实现2048小游戏
2048小游戏首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式, 然后开始js逻辑 <div id="box">//一个盒子里面16 ...
原生js做h5小游戏之打砖块
前言首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
原生JS实现2048小游戏
前几天玩了一款2048微信小程序,结果脑子一抽,想到了为什么不能自己用JS写一个于是,下面这个玩意儿就诞生了... 实现思路大概是这样的,首先使用table表格完成页面布局,其次使用JS实现数字动态 ...
原生js完成拼图小游戏
废话不说,看代码,图片可以自己找,我这直接引用了百度的了 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/x ...
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
复制代码代码如下: 简易计算机 //获取随机数 function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.ran ...

原生JS制作抽奖小游戏

原生JS制作抽奖小游戏相关推荐

最新文章

热门文章