您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
深圳小产权房       [公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
VUE 实现一个简易老虎机的项目实践
内容摘要: htmldivclass='lhj_box'//这里直接搞三组divclass='lhj_item'v-for='itein3':key='ite'//ref标识,到时候获取,用于计算高度ul:class='`lhj_ul_${ite}`'ref='ul'liv-for='(item,index)inimg':key='index'img:src='requ......
html

<divclass="lhj_box">

//这里直接搞三组

<divclass="lhj_item"v-for="itein3":key="ite">

//ref标识,到时候获取,用于计算高度

<ul:class="`lhj_ul_${ite}`"ref="ul">

<liv-for="(item,index)inimg":key="index">

<img:src="require(`../assets/images/l_gift${item}.png`)"alt="">

</li>

</ul>

</div>

</div>

js部分

/**

*金额依次为1.11.21.31.41.5

***/

letUL_BOXS=[]

exportdefault{

name:'lhj',

data(){

return{

img:[],

liHeight:0,

arr:[4,5,4],//中奖数组

}

},

created(){

this.setArr()

},

asyncmounted(){

letevenTransition=this.whichTransitionEvent()

awaitthis.$nextTick()

//获取ul3个box

UL_BOXS=this.$refs.ul

//计算每个图片高度

letulH=UL_BOXS[0].offsetHeight

//我自己默认循环的50个图片

this.liHeight=ulH/50

//监听动画结束函数

UL_BOXS[2].addEventListener(evenTransition,rest,false)

letthat=this

//复位函数

functionrest(){

for(leti=0;i<that.arr.length;i++){

lety=(that.arr[i]-1)*that.liHeight

that.aniImg(y,i,0)

}

alert('中奖下标'+JSON.stringify(that.arr))

}

},

beforeDestroy(){

UL_BOXS=null

},

methods:{

asynctoStart(){

//圈数

letloop=3

//一圈基础高度奖品数*每个高度

letbase=5*this.liHeight

for(leti=0;i<this.arr.length;i++){

leta=awaitthis.delayPerform(i*100)

if(a==1){

lety=base*loop+(this.arr[i]-1)*this.liHeight

this.aniImg(y,i)

}

}

},

//目标位置

aniImg(y,index,duration=3000){

UL_BOXS[index].style.transitionDuration=`${duration}ms`

UL_BOXS[index].style.transform=`translate(0px,-${y}px)translateZ(0px)`

},

//设置重复数组

setArr(){

letarr=[1,2,3,4,5]

letimg2=[]

for(leti=0;i<10;i++){

img2.push(...arr)

}

this.img=Object.freeze(img2)

},

//改变中奖位置

toChang(){

this.arr=[1,1,1]

},

//延时函数

delayPerform(delay=200){

returnnewPromise((resolve,reject)=>{

setTimeout(()=>{

resolve(1)

},delay)

})

},

//动画兼容

whichTransitionEvent(){

letel=document.createElement('span'),

transitions={

'transition':'transitionend',

'OTransition':'oTransitionEnd',

'MozTransition':'transitionend',

'WebkitTransition':'webkitTransitionEnd'

};

for(lettintransitions){

if(el.style[t]!==undefined){

returntransitions[t];

}

}

el=null;

}

}

}

</script>

上一篇:python读取html中指定元素生成e 下一篇:python数据写入Excel文件中的实
发布日期:2022/4/26
手机扫二维码直达本页
发布时间:13:32:25
点击:281
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022