VUE创建的带跑马灯动画的九宫格抽奖

所属分类: 网页特效-抽奖&游戏    2024-02-23 10:45:16

VUE创建的带跑马灯动画的九宫格抽奖 ie兼容6
反馈问题  查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

VUE创建的带跑马灯动画的九宫格抽奖(共9个文件)

    • index.html

使用方法

new Vue({el:"#app",data:{isStart:1,score:10,list:[{img:'img/j1.png',title:'谢谢参与'},{img:'img/j2.png',title:'美女一个'},{img:'img/j1.png',title:'宝马一辆'},{img:'img/j2.png',title:'单车一辆'},{img:'img/j1.png',title:'鸡蛋一蓝'},{img:'img/j2.png',title:'500红包'},{img:'img/j1.png',title:'靓号一个'},{img:'img/j2.png',title:'鲜花一蓝'}],index:-1,count:8,timer:0,speed:200,times:0,cycle:50,prize:-1,click:true,showToast:false,},mounted(){},methods:{startLottery(){if(!this.click){return}
this.startRoll();},startRoll(){this.times+=1
this.oneRoll()
if(this.times>this.cycle+10&&this.prize===this.index){clearTimeout(this.timer)
this.prize=-1
this.times=0
this.speed=200
this.click=true;var that=this;setTimeout(res=>{that.showToast=true;},500)}else{if(this.times7){this.prize=7}}else if(this.times>this.cycle+10&&((this.prize===0&&this.index===7)||this.prize===this.index+1)){this.speed+=110}else{this.speed+=20}
if(this.speed<40){this.speed=40} this.timer=setTimeout(this.startRoll,this.speed)}},oneRoll(){let index=this.index const count=this.count index+=1 if(index>count-1){index=0}
this.index=index},}})

站长提示:
1. 平台上所有素材资源,需注册登录会员方能正常下载。
2. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励20K币
3. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
4. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 抽奖&游戏

jquery随机头像图片抽奖特效代码

按住键盘空格键即可开始抽奖,奖项分为一二三等奖,中奖后头像图片动画飞入对应奖项内。
  抽奖&游戏
 159  

基于vue.js实现的支持在线自定义奖项的球状抽奖特效

一款大屏幕年会抽奖代码,支持在线设置奖项、设置参与人员、设置奖池(一二三等奖),共包含两个html页面:抽奖页和设置页,中奖后带MP3提示音效。
  抽奖&游戏
 58  

jQuery三组数字滚动随机数抽奖特效代码

首先需要先输入随机数字范围,然后才开始抽取中奖。
  抽奖&游戏
 153  

js+html5 canvas黑白五子棋小游戏源码

js+html5 canvas黑白五子棋小游戏源码
  抽奖&游戏
 189  

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论