用VUE写一个JS和CSS抽奖代码
时间: 2023-06-05 08:05:41 浏览: 95
好的,我可以为您提供一个VUE的抽奖代码示例。以下是代码:
```
<template>
<div class="container">
<h1>抽奖</h1>
<div class="lottery-box">
<div class="prize" v-for="prize in prizes" :key="prize.index" :class="{active: prize.isActive}">
<img :src="prize.image" alt="">
<div class="prize-name">{{ prize.name }}</div>
</div>
</div>
<button class="btn" @click="startLottery" :disabled="!canStart">开始抽奖</button>
</div>
</template>
<script>
export default {
data() {
return {
prizes: [
{ index: 1, name: '一等奖', image: '/img/prize1.jpg', isActive: false },
{ index: 2, name: '二等奖', image: '/img/prize2.jpg', isActive: false },
{ index: 3, name: '三等奖', image: '/img/prize3.jpg', isActive: false },
{ index: 4, name: '幸运奖', image: '/img/prize4.jpg', isActive: false },
],
activeIndex: -1,
isStarted: false,
canStart: true,
};
},
methods: {
startLottery() {
if (this.isStarted) {
return;
}
this.isStarted = true;
this.canStart = false;
this.activeIndex = -1;
let index = 0;
const timer = setInterval(() => {
index++;
if (index > this.prizes.length - 1) {
index = 0;
}
this.activeIndex = index;
}, 50);
setTimeout(() => {
clearInterval(timer);
this.isStarted = false;
this.prizes.forEach((prize) => {
prize.isActive = false;
});
const winnerIndex = Math.floor(Math.random() * this.prizes.length);
this.prizes[winnerIndex].isActive = true;
this.activeIndex = winnerIndex;
this.canStart = true;
}, 3000);
},
},
};
</script>
<style>
.container {
text-align: center;
}
.lottery-box {
margin-top: 50px;
display: flex;
justify-content: center;
}
.lottery-box .prize {
width: 200px;
height: 200px;
margin: 20px;
position: relative;
cursor: pointer;
transform: rotate(0deg);
transition: all 3s ease-out;
}
.lottery-box .prize img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lottery-box .prize-name {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: #fff;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-out;
transform: translateY(200px);
}
.lottery-box .prize.active .prize-name {
transform: translateY(0);
}
.btn {
margin-top: 50px;
padding: 20px;
background: #ffcc00;
font-size: 24px;
font-weight: bold;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
}
.btn:disabled {
background: #ccc;
cursor: default;
}
</style>
```
这个抽奖代码使用VUE编写。在这个示例代码中,您可以看到一个抽奖盒子,其中包含四个奖项图片和名称,还有一个开始抽奖的按钮。当用户点击“开始抽奖”按钮时,抽奖将开始并在3秒内随机选择一个获奖者。在抽奖过程中,盒子中的奖项将随机旋转,直到最终结果。希望这个VUE抽奖代码示例能对您有所启发!