九宫格抽奖
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 实现九宫格抽奖</title>
<style>
#container {
width: 6.6rem;
height: 6.8rem;
margin: 10% auto;
border: 0.14rem solid #99d4ff;
border-radius: 0.2rem;
padding: 2%;
}
#list {
width: 6.6rem;
height: 6.8rem;
list-style: none;
margin: 0;
padding: 0;
}
#list li,
#list span {
width: 2rem;
height: 2rem;
float: left;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
background-color: #CCCCCC;
margin: 1.4%;
border-radius: 5px;
font-size: 0.24rem;
}
#list span.span {
background-color: #ff3a59;
color: white;
font-size: 12px;
}
#list span.span1 {
background: #ada7a8;
}
#list li .mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
background-size: cover;
display: none;
border-radius: 5px;
}
#list .active .mask {
display: block;
}
#message {
line-height: 32px;
color: #9a9a9a;
text-align: center;
position: absolute;
left: 50%;
top: 50px;
width: 300px;
height: 50px;
margin-left: -150px;
display: none;
background: #000;
color: #fff;
}
</style>
<script>
function setRootFontSize() {
var a = document.documentElement,
b = a.getBoundingClientRect().width || screen.width || 320;
a.style.fontSize = (750 >= b ? b : 750) / 7.5 + "px";
}
setRootFontSize();
if (window.addEventListener) {
window.addEventListener("resize", setRootFontSize, false);
} else if (window.attachEvent) {
window.attachEvent("onresize", setRootFontSize);
}
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<ul id="list">
<!-- mask类为抽奖滚动起来的标记 -->
<li>四六级全程班电子链接<div class="mask"></div>
</li>
<li>感谢参与<div class="mask"></div>
</li>
<li>帆布包+单词1000词口袋书<div class="mask"></div>
</li>
<li>帆布包+3000词书<div class="mask"></div>
</li>
<span id="startbutton" onclick="startlottery()" class="span">开始抽奖<br>抽个奖次数<em
class="number"></em></span>
<li>学习卡<div class="mask"></div>
</li>
<li>学习卡<div class="mask"></div>
</li>
<li>感谢参与<div class="mask"></div>
</li>
<li>礼盒教育<div class="mask"></div>
</li>
</ul>
<!-- 获奖信息展示 -->
<div id="message"></div>
</div>
</body>
<script type="text/javascript">
var container = $("#container");
li = $("#list li"),
timer = null;
bReady = true; //定义一个抽奖开关
let prize = [0, 1, 2, 4, 7, 6, 5, 3]; //奖品li标签滚动的顺序
let num = 0; //num用来存放得到的随机函数，也就是抽中的奖品
let number = 3; //抽奖次数
let txtList = ["帆布包+3000词书", "四六级全程班电子链接", "感谢参与", "帆布包+单词1000词口袋书", "学习卡", "礼盒教育", "感谢参与", "学习卡"]
$(".number").html(number);
//开始抽奖
function startlottery() {
if (number > 0) {
if (bReady) { //当抽奖开关为true的时候，可点击抽奖
$('#message').hide(); //将获奖信息div隐藏（以防止上次抽奖信息还显示）
$("#startbutton").addClass("span1")
bReady = false; //抽奖开关设为false 处于抽奖中 即不能点击抽奖
var flag = "礼盒教育";
for (var a = 0; a < 6; a++) {
if (flag == txtList[a]) {
num = a; //得到一个随机数（即奖品）
console.log(num, txtList[a])
break;
}
}
startinit(num); //执行抽奖初始化
}
} else {
alert("没有抽奖次数了");
}
}
//抽奖初始化
function startinit(num) {
var i = 0; //定义一个i 用来计算抽奖跑动的总次数
var t = 100; //抽奖跑动的速度 初始为200毫秒
var rounds = 2; //抽奖转动的圈数
var rNum = rounds * 8; //标记跑动的次数（这是一个条件判断分界线）
timer = setTimeout(startscroll, t); //每t毫秒执行startscroll函数
//抽奖滚动的函数
function startscroll() {
//每次滚动抽奖将所有li的class都设为空
for (var j = 0; j < li.length; j++) {
li[j].className = '';
}
var prizenum = prize[i % li.length]; //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
li[prizenum].className = "active";
i++;
if (i < rNum - 8) { //当i小于转(rNum-8次)的数量，t不变还是200毫秒
timer = setTimeout(startscroll, t); //继续执行抽奖滚动
} else if (i >= rNum - 8 && i < rNum + num) {
//t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低
t += (i - rNum + 8) * 5;
timer = setTimeout(startscroll, t); //继续执行抽奖滚动
}
if (i >= rNum + num) { //当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息
$('#message').html(txtList[num]); //提示抽中的信息
var timer2 = null;
timer2 = setTimeout(function() {
$('#message').show(); //奖品展示的信息为显示状态
$("#startbutton").removeClass("span1")
clearTimeout(timer2);
}, 0);
bReady = true; //当计时器结束后让span标签变为抽奖状态
clearTimeout(timer);
// 抽奖次数-1
number = number - 1
$(".number").html(number);
}
}
}
</script>
</html>
