随便写写：
<!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>抽奖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="work">
<div class="center">
<div
style="text-align: center; margin: 10px; padding: 10px; background-color: rgb(191, 136, 205);color: #fff; font-size: 30px;">
咸瑜抽奖！ 童叟无欺！ 10块钱一次！ 10块钱买不了吃亏！ 买不来上当！</div>
<div class="centent">
<div class="box" v-for="(item, index) in list" :key="index" :class="[id == item.id?'active':'']">
<div v-html="item.name"></div>
</div>
<div class="button" @click="start">
<div> 点击抽奖 </div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#work",
data() {
return {
list: [
{ id: 0, name: "Iphone13 Pro" },
{ id: 1, name: "咸瑜的<br>Ipad 2021 256G" },
{ id: 2, name: "保时捷钥匙<br>一枚" },
{ id: 3, name: "洗脚机<br>一部" },
{ id: 4, name: "刘畊宏<br>同款短裤一条" },
{ id: 5, name: "男生女生向前冲<br>同款冰箱" },
{ id: 6, name: "小米电视机<br>一台" },
{ id: 7, name: "惠普<br>笔记本电脑" },
],
id: 0,
}
},
methods: {
start() {
// 定义抽奖顺序
var arr = [0, 1, 2, 4, 7, 6, 5, 3]
let i = 0;
let circle = 3;
let random = 0;
// 转个3圈再说...
let flag = setInterval(() => {
// this.id = this.id == 3 ? i = 0 : arr[++i];
if (this.id == 3) {
this.id = i = 0;
// 计圈
circle--;
} else {
this.id = arr[++i]
// 已转3圈
if (circle == 0) {
// 取随机数 会有多个值，但取最后一个为准
random = Math.floor(Math.random() * 8);
// 会有多个值，但取最后一个为准
// console.log(random);
}
if (circle < 0) {
if (random === this.id) {
// 停下来
clearInterval(flag)
// 延时500ms执行，因为动画没赶上
setTimeout(() => {
alert("恭喜您！获得" + this.list[random].name)
}, 500);
}
}
}
}, 150);
},
}
})
</script>
<style>
#work {
width: 100vw;
}
.center {
width: 80%;
margin: 0 auto;
}
.centent {
width: 400px;
height: 400px;
margin: 0 auto;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"b1 b2 b3"
"b4 bs b5"
"b6 b7 b8";
row-gap: 10px;
column-gap: 10px;
}
.box,
.button {
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgb(60, 58, 58);
color: #fff;
font-weight: 700;
border-radius: 3%;
border: 1px solid transparent;
}
.active {
border: 1px solid red;
box-shadow: 1px 1px 18px 3px red;
color: aqua;
text-shadow: 3px 2px 10px aqua;
animation: showDivAni 0.3s 0.5;
}
.button {
background-color: rgb(53, 53, 53);
color: aqua;
text-shadow: 3px 2px 10px aqua;
cursor: pointer;
grid-area: bs;
}
@keyframes showDivAni {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
</style>
</html>
View Code
吼吼吼
本文来自博客园，作者：咸瑜，转载请注明原文链接：javascript:void(0)p/16242285.html
