您正在使用 IPV4 [3.236.234.62] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
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中指定元素生成excle文件示例

 

下一篇:JavaScript实现网页版贪吃蛇游戏

发布日期:2022/4/26
手机扫二维码直达本页
发布时间:13:32:25
点  击:10
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....