原生JavaScript实现九宫格抽奖
本文实例为大家分享了JavaScript实现九宫格抽奖 的具体代码，供大家参考，具体内容如下
思路：通过移动背景颜色实现中奖信息，每一个方形元素，需要按顺序排列，加个延时器，当到最后一个的时候让它从0开始就可以动起来了，！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 600px;
height: 600px;
margin: 0 auto;
position: relative;
}
#box div {
width: 198px;
height: 198px;
border-radius: 10px;
/* border: 1px solid red; */
text-align: center;
line-height: 198px;
background-color: #ffe8e8;
position: absolute;
}
.btns {
text-align: center;
}
.active {
background-color: rgb(255, 94, 0) !important;
}
#start,#end{
width: 100px;
height: 30px;
background-color: rgb(24, 105, 255);
color: white;
}
</style>
</head>
<body>
<div id="box"></div>
<br>
<div class="btns">
<button id="start">开始</button>
<button id="end">停止</button>
</div>
<script>
var box = document.getElementById('box');
var start = document.getElementById('start');
var end = document.getElementById('end');
// 所有奖品
var allList = ['宇宙战将', '白起', '太阳系级宇宙战舰', '小破木船', '地球级宇宙战将', '月球级蘸酱', '太阳级蘸酱', '大西洋级蘸酱'];
// 允许抽中的奖品
var list = ['太阳系级宇宙战舰','白起']; // 想要中的奖品放进去
for (let i = 0; i < allList.length; i++) {
box.innerHTML += `<div>${allList[i]}</div>`;
}
box.children[1].style.left = '200px';
box.children[2].style.left = '400px';
box.children[3].style.left = '400px';
box.children[3].style.top = '200px';
box.children[4].style.left = '400px';
box.children[4].style.top = '400px';
box.children[5].style.top = '400px';
box.children[5].style.left = '200px';
box.children[6].style.top = '400px';
box.children[7].style.top = '200px';
var running = false;
var flag = true;
var active = 0;
var time = 200;
var goods = '';
box.children[active].className = 'active';
start.onclick = function () {
if (!running) { // 只有当没有在抽奖中的时候，才让点击开始
running = true; // 重置
time = 200; // 重置
f1();
}
}
end.onclick = function () {
if (running) { // 只有当正在抽奖中的时候才让点击停止
flag = false;
goods = list[Math.floor(Math.random() * list.length)]; // 0, 1, 2随机的一个值
}
}
// 如果使用定时器，time会锁死不会改变；通过延时器模拟定时器的方法，是可以改变定时的时间
function f1() {
box.children[active].className = '';
active++;
if (active > 7){ // 因为是从0开始计算所以写7
active = 0;
}
box.children[active].className = 'active';
if (flag) { // 抽奖速度越来越快
time -= 10;
if (time < 50) {
time = 50;
}
} else { // 抽奖速度越来越慢
time += 10;
if (time > 300) {
time = 300;
// 判断当前滚动到的奖品是否是内定的奖品
if (box.children[active].textContent === goods ) {
flag = true;
running = false;
setTimeout(() => {
alert(goods); // 弹出抽奖信息
}, 500);
return; // 抽中奖品后，停止抽奖
}
}
}
setTimeout(f1,time);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
php+lottery.js实现九宫格抽奖功能
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() function start_lottery(){ if(flag){ //alert('正在抽奖
-
原生JS实现九宫格抽奖效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #container{w
-
JavaScript实现九宫格抽奖功能的示例代码
目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch
-
JavaScript实现九宫格抽奖
本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码,供大家参考,具体内容如下 看到个抽奖案例,觉得还不错.就自己做了一个简单版本. 点击中间的开始,抽奖就会跑起来,速度由慢到快,再到慢,最后停下.停下的格子就是中奖的奖品. 主要思路: 1.抽奖的高亮色块轮循,使用一个 class 去控制. 2.要控制色块轮循的速度快慢,要用到计时器 setTimeout,可以控制轮循速度. 3.正在抽奖轮循的时候,开始按钮是不能点击的.所以要用一个变量判断当前是否正在轮循. 4.轮循的次数是一个随
-
原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: <div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>抽奖</div> <div>美的冰箱</div> <
-
js实现九宫格抽奖
本文实例为大家分享了js实现九宫格抽奖的具体代码,供大家参考,具体内容如下 <div id="contaner"> <div id="one">一块钱</div> <div id="two">谢谢惠顾</div> <div id="three">下去写作业</div> <div id="four">一局游戏<
-
原生JavaScript实现九宫格抽奖
本文实例为大家分享了JavaScript实现九宫格抽奖 的具体代码,供大家参考,具体内容如下 思路:通过移动背景颜色实现中奖信息,每一个方形元素,需要按顺序排列,加个延时器,当到最后一个的时候让它从0开始就可以动起来了,!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
-
基于javascript实现九宫格大转盘效果
本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:
-
jquery+h5实现九宫格抽奖特效（前后端代码）
前言: 前端:jq+h5 实现九宫格动效 后端:thinkphp3.2.3 实现中奖概率算法 功能:支持读取数据库预设的中奖率及奖品池,中奖率可以自定义,必须是整数 最终效果如下: 代码: choujiang.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu
-
基于Unity编写一个九宫格抽奖软件
目录 一.前言 二.效果图 三.案例制作 1.界面搭建 2.代码编写 3.效果演示 四.后言 一.前言 本博文标题和内容参考:基于原生JS实现H5转盘游戏 博主将改编成Unity版本. 二.效果图 三.案例制作 1.界面搭建 使用了9个图片作为奖品栏,然后一个chooseBox作为蒙版,一个StartBtn开始按钮放在中间 2.代码编写 新建脚本goLuckyDraw.cs 使用DoTween插件做动画,没有导入这个插件的下载导入一下 实现抽奖,主要有两个方面,一个是概率的设置,一个是动画 动画
-
jquery+h5实现九宫格抽奖特效(前后端代码)
前言: 前端:jq+h5 实现九宫格动效 后端:thinkphp3.2.3 实现中奖概率算法 功能:支持读取数据库预设的中奖率及奖品池,中奖率可以自定义,必须是整数 最终效果如下: 代码: choujiang.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu