原生JavaScript实现九宫格抽奖
更新时间：2022年06月28日 15:25:07 作者：好先
这篇文章主要为大家详细介绍了原生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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
联合类型（Union Types）和交叉类型（Intersection Types）是 TypeScript 中的两种高级类型,它们都用于组合多个类型并生成新的类型,但它们两者之间的用法不一样,本文小编就给大家讲讲TypeScript中交叉类型和联合类型的区别,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了JavaScript中不同场景下的三种常见文件下载方案,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2023-12-12
这篇文章主要介绍了JavaScript引用赋值与传值赋值总结，在JavaScript中基本数据类型都是传值赋值，复合数据类型都是引用赋值(传地址)也叫引用传址，下文更多相关资料，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了JavaScript使用replace函数替换字符串的方法,涉及javascript中replace函数的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
闲暇之余，学习了一下jfreechart图表生成，结合大虾们的著作，小弟进行了系统的总结，真是获益匪浅，这里推荐给小伙伴们，有需要的朋友可以参考下。2015-04-04
这篇文章主要为大家详细介绍了JavaScript事件代理和委托，感兴趣的小伙伴们可以参考一下2016-04-04
这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来。2010-05-05
这篇文章主要介绍了微信小程序实现tab页面切换功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要为大家介绍了JavaScript原型对象的this指向问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出，想通过 getElementsByName 处理后再输出相应的内容。用原生的 javascript怎样可以处理呢？2010-07-07
最新评论