<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>九宫格抽奖</title>
<style>
html,
body {
font-size: 13.3333333333333vw;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #fff;
font-size: .3rem;
}
.items{
display: grid;
grid-template-columns: repeat(3,calc(100vw/3));
grid-template-rows: repeat(3,calc(100vw/3));
}
.item{
border: 1px solid #fff;
background-color: #f0f0f0;
display: grid;
justify-content: center;
align-items: center;
}
.item-active{
border: 1px solid red;
background-color: pink;
color: #fff;
}
.item:nth-child(5){
border:1px solid green;
background-color: green;
color:#fff;
}
</style>
</head>
<body>
<div id="app">
<div class="items">
<div v-for="(item,index) in items" :key="index" class="item"
:class="active===index?'item-active':''"
@click="toBegin(index)"
>
<span>{{item.name}}</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
active:null,
circle:[0,1,2,5,8,7,6,3],
items:[
{name:'手机0'},
{name:'钱包1'},
{name:'iPhone11-2'},
{name:'华为P30-3'},
{name:'开始抽奖'},
{name:'Ipad-5'},
{name:'小米背包-6'},
{name:'小米鼠标-7'},
{name:'无线路由器-8'},
]
},
methods:{
toBegin(index){
if(index===4){
let random = Math.floor(Math.random()*10-1);
let turnsNumber = random > 3?random:3;
let array = [];
for(let j = 1;j<turnsNumber;j++){
array = array.concat(this.circle)
}
let lastArray = [];
for(let i = 0;i<random;i++){
lastArray.push(this.circle[i])
}
array = array.concat(lastArray);
for(let i=0;i< array.length;i++){
setTimeout(() => {
this.active = array[i]
}, i*50)
}
}
},
}
})
</script>
</body>
</html>
