js九宫格抽奖特效代码下载


js九宫格抽奖特效代码下载
js九宫格抽奖特效代码下载以及九宫格抽奖等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/lottery.css" />

2. 引入JS

<script src="js/vue.min.js"></script>
<script src="js/lottery.js"></script>

3. HTML代码

<div class="lottery-box" id="app">
	<h1 class="title">VUE九宫格抽奖</h1>
	<div class="lottery">
		<div class="lottery-item">
			<div class="lottery-start">
				<div class="box gray" v-if="isStart===0">
					<p>活动未开始</p>
				</div>
				<div class="box" @click="startLottery" v-if="isStart===1">
					<p><b>抽奖</b></p>
					<p>消耗{{score}}积分</p>
				</div>
				<div class="box gray" v-if="isStart===2">
					<p>活动已过期</p>
				</div>
			</div>
			<ul>
				<li v-for="(item,i) in list" :class="i==index?'on':''">
					<div class="box">
						<p><img :src="item.img" alt=""></p>
						<p>{{item.title}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>  
	<!-- 中奖弹窗 -->
	<div class="mask" v-if="showToast"></div>
	<div class="lottery-alert" v-if="showToast">
		<h1>恭喜您</h1>
		<p><img src="img/j2.png" alt=""></p>
		<h2>获得{{list[index].title}}</h2>
		<div class="btnsave" @click="showToast=false">确定</div> 
	</div>  
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章