抽奖活动跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯抽奖</title>
<style>
.grid-item {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin-top: 10px;
position: relative;
}
.grid-bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
text-align: center;
line-height: 200px;
}
.grid-container {
width: 700px;
height: 700px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div id="app">
<div class="grid-container">
<div :class="`grid-item grid-item${index}`" v-for="(item, index) in grids.name" :key="index"
@click="spinGrid(index)">
<div class="grid-bg">{{ item }}</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
deepInterval: null,
grids: {
name: ['神器', '金色传说', '皇冠', '神技', '点击抽奖', '传说', '秘籍', '金币', '史诗'],
cycle: [0, 1, 2, 5, 8, 7, 6, 3], // 跑马灯排序
default_my_prize: 4, // 奖品坐标,按照跑马灯坐标
index: 0,
count: 0,
}
},
methods: {
spinGrid(index) {
this.grids.count = 0; // 最少跑马灯效果归0
if (index !== 4) { return }
let my_prize = document.getElementsByClassName('grid-bg');
this.deepInterval = setInterval(() => {
for (let i = 0; i < my_prize.length; i++) {
my_prize[i].style.backgroundColor = "";
}
this.grids.index >= this.grids.cycle.length && (this.grids.index = 0); // 超出时坐标归0
my_prize[this.grids.cycle[this.grids.index]].style.backgroundColor = "violet";
this.grids.index++; // 坐标+1
this.grids.count++; // 记录跑了多少,这里大于20时展示
if (this.grids.count > 20 && (this.grids.index - 1) === this.grids.default_my_prize) {
clearInterval(this.deepInterval); //清除
//中奖提示
setTimeout(() => { alert('恭喜你抽中了[' + my_prize[this.grids.cycle[this.grids.index - 1]].innerHTML + ']') }, 100);
this.deepInterval = null;
}
console.log("log");
}, 70)
},
}
})
</script>
</html>