下面将提供两种形式的九宫格抽奖实现代码,一种是可控的,即可以固定结果;另一种是不可控的,通过随机时间来决定结果。废话不多说,上代码
一,可控(复制粘贴后---记得更改图片路径)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 340px;
height: 340px;
border: 1px #00ffff solid;
position: relative;
margin: 100px;
}
.box div {
width: 100px;
height: 100px;
background-color: royalblue;
text-align: center;
line-height: 100px;
}
.div2 {
position: absolute;
top: 10px;
left: 10px;
}
.div3 {
position: absolute;
top: 10px;
left: 120px;
}
.div4 {
position: absolute;
top: 10px;
left: 230px;
}
.div5 {
position: absolute;
top: 120px;
left: 230px;
}
.div6 {
position: absolute;
top: 230px;
left: 230px;
}
.div7 {
position: absolute;
top: 230px;
left: 120px;
}
.div8 {
position: absolute;
top: 230px;
left: 10px;
}
.div9 {
position: absolute;
top: 120px;
left: 10px;
}
.button {
width: 100px;
height: 100px;
background-color: #62c6a3;
position: absolute;
text-align: center;
line-height: 100px;
top: 120px;
left: 120px;
}
</style>
</head>
<body>
<div class="box">
<div class="div2">短裙</div>
<div class="div3">口红</div>
<div class="div4">草莓</div>
<div class="div5">西瓜</div>
<div class="div6">奶茶</div>
<div class="div7">美甲</div>
<div class="div8">谢谢参与</div>
<div class="div9">苹果13</div>
<strong class="button"> 点击抽奖</strong>
</div>
</body>
<script>
let button = document.getElementsByClassName("button")[0];
let box = document.getElementsByClassName("box")[0];
let pirze = box.getElementsByTagName("div");
console.log(pirze);
let k = 0;
let time = 500;
let count = 0;
let int;
let rom = 0;
button.onclick = eve;
function eve() {
pirze[k].style.background = "pink";
int = setInterval(pu, time);
rom = Math.floor(Math.random() * pirze.length); //在这里控制,rom为下标
// rom = 1;
button.onclick = null;
}
function pu() {
if (k < pirze.length - 1) {
k++;
pirze[k - 1].style.background = "royalblue";
pirze[k].style.background = "pink";
} else {
k = 0;
count++;
pirze[pirze.length - 1].style.background = "royalblue";
pirze[k].style.background = "pink";
}
if (count <= 5) {
if (time <= 100) {
time = 100;
} else {
time -= 20;
}
} else {
if (time >= 500) {
time = 500;
} else {
time += 20;
}
}
if (count > 7 && rom == k) {
clearInterval(int);
count = 0;
rom = 0;
time = 500;
button.onclick = eve;
let text = pirze[k].innerHTML;
setTimeout(function () {
alert("恭喜您获得:" + text);
}, 300);
} else {
clearInterval(int);
int = setInterval(pu, time);
}
}
</script>
</html>
二,不可控(复制粘贴后---记得更改图片路径)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 390px;
margin: 0 auto;
padding: 10px;
background-color: #ccc;
}
ul {
width: 100%;
height: 100%;
margin: auto;
padding: 0px;
display: flex;
flex-wrap: wrap;
}
li {
width: 120px;
height: 120px;
margin: 5px;
position: relative;
border-radius: 5px;
list-style: none;
background-size: cover;
background-repeat: no-repeat;
}
li:nth-of-type(1) {
background-image: url("./9.webp");
}
li:nth-of-type(2) {
background-image: url("./2.webp");
}
li:nth-of-type(3) {
background-image: url("./3.webp");
}
li:nth-of-type(4) {
background-image: url("./4.webp");
}
li:nth-of-type(6) {
background-image: url("./5.webp");
}
li:nth-of-type(7) {
background-image: url("./6.webp");
}
li:nth-of-type(8) {
background-image: url("./7.webp");
}
li:nth-of-type(9) {
background-image: url("./8.webp");
}
#startBtn {
width: 100%;
height: 100%;
background-color: white;
border: 0px;
background-size: cover;
background-repeat: no-repeat;
/* background-image: url("../image/抽奖.jpg"); */
}
.active::after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
content: "";
z-index: 1;
opacity: 0.5;
background-color: yellow;
}
#record {
background-color: #fff;
border-radius: 5px;
height: 50px;
overflow-y: scroll;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li><button id="startBtn">开始抽奖</button></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<div>
<h3>奖品记录</h3>
<div id="record"></div>
</div>
</div>
</body>
<script>
//获取抽奖按钮
let startBtn = document.getElementById("startBtn");
//获取奖品项目的集合
let items = document.getElementsByClassName("item");
//获取奖品记录值
let record = document.getElementById("record");
//设置奖品滚动的顺序,即控制奖品转动的方向
let directionArr = [0, 1, 2, 4, 7, 6, 5, 3];
//抽奖的开关
let flag = true;
//抽到的奖品的数组下标
let awardIndex = 0;
//定义定时器标识符
let timer = null;
//1.点击抽奖按钮
startBtn.onclick = () => {
//2.当抽奖开关为true时,可以点击抽奖
if (flag) {
//当抽奖开关为false时,处于抽奖状态中
flag = false;
//更换抽奖的状态-禁止点击抽奖
startBtn.disabled = true;
//3.定义定时器,转动奖品
timer = setInterval(() => {
//未转到的奖品的样式
items[directionArr[awardIndex]].className = "item";
//对奖品下标进行自增,实现奖品连在一起转动
awardIndex++;
//当奖品的下标超过数组下标时,赋值为0重新开始转圈
if (awardIndex >= 8) {
awardIndex = 0;
}
//转到的奖品的样式
items[directionArr[awardIndex]].className += " active";
}, 100);
}
//4.定义一个延时器,到时间则停止转动
setTimeout(() => {
// awardIndex = Math.floor(Math.random() * directionArr.length) - 1;
//5.清理定时器,停止转动
clearInterval(timer);
//解除按钮的禁止状态
startBtn.disabled = false;
//开关值赋值为true
flag = true;
//定义奖品字符串
let award = "";
//6.获取抽奖的奖品下标来判断获取的奖品
switch (directionArr[awardIndex]) {
case 0:
award = "iphoneX";
break;
case 1:
award = "再来一次";
break;
case 2:
award = "百度网盘VIP";
break;
case 3:
award = "牛排券";
break;
case 4:
award = "纪念U盘";
break;
case 5:
award = "瓶酒一扎";
break;
case 6:
award = "谢谢参与";
break;
case 7:
award = "PS4 pro";
break;
}
//7.对抽中的奖品进行记录
record.innerHTML += "你抽到了" + award + "<br/>";
}, Math.round(Math.random() * 3000) + 1500);
};
// Math.round(Math.random() * 3000 +)
</script>
</html>