当前位置: 首页 > Web前端 > HTML5

手写一个转盘抽奖

时间:2023-04-05 16:02:15 HTML5

来达到效果。html核心代码如下wrap">

核心css代码如下。框{宽度:400px;高度:400px;边框:1px实心#cccccc;保证金:0自动;显示:弹性;对齐项目:居中;证明内容:居中;位置:相对;}.wrap{宽度:300px;高度:300px;边框:1px实心#000;边界半径:50%;item{位置:绝对;border-top:1px纯红色;宽度:150px;左:50%;顶部:50%;转换:翻译(-0%,-50%);变换原点:左;右:0;左边:汽车;}.point{位置:绝对;z-指数:11;}.pointimg{宽度:60px;}.prizeWrap{padding-top:37px;位置:绝对;左:50%;顶部:-50%;变换:平移(-50%)旋转(313deg);变换原点:中心;}js核心代码如下/*prizeList:prizelistresult:抽奖结果*/functioninitPrize(result='prize4',callbck=function(){},prizeList=[{name:'prize1'},{name:'Prize2'},{name:'Prize3'},{name:'Prize4'},]){constcircle=3//旋转圈数constduring=2//旋转2秒2秒的时间constwrap=document.querySelector('.wrap');wrap.style=`transition:all${during}s`lethtml=``;constarea=/(prizeList.length)prizeList.forEach((item,index)=>{html+=`${item.name}
`});wrap.innerHTML=htmldocument.querySelector('.point').addEventListener('click',function(e){letprizeIndex=0;//对使用结果在奖励列表的indexfor(leti=0;i