js:实现九宫格转盘抽奖 |
您所在的位置：网站首页 › 转盘转盘 › js:实现九宫格转盘抽奖 |
js:实现九宫格转盘抽奖
|
实现效果：
模仿京东购物后的抽奖 点击立即抽奖，在随机时间内转盘停止转动，转盘隐藏 奖品dom展示，展示的奖励是在转盘中的8项奖励中随机取3个，展示出来 html结构： 下单抽抽乐 活动规则 5金豆 理财满1000减50 1元流量红包 1元流量红包 立即抽奖 20金豆 20金豆 谢谢参与 理财满1000减50 恭喜您，抽中3项奖励 css： .lottery-container{ border-radius: .133333rem; width: 9.2rem; height: 7.293333rem; margin: 0 auto .346667rem; background: #FFFFFF; box-shadow: 0 .026667rem .266667rem 0 rgba(0,0,0,0.06); .lottery-title-box{ width: 100%; position: relative; .lottery-title{ margin: 0 auto; font-family: PingFangSC-Regular; font-size: .426667rem; color: #333333; letter-spacing: 0; text-align: center; line-height: 1.226667rem; } .lottery-subtitle{ top: .44rem; right: .373333rem; position: absolute; font-family: PingFangSC-Regular; font-size: .293333rem; color: #999999; letter-spacing: 0; } } .lottery-turntable{ display: flex; flex-wrap: wrap; .turntable-item{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 2.8rem; height: 1.706667rem; margin-left: .2rem; margin-bottom: .2rem; background: #FCF8EC; border: .013333rem solid rgba(255,232,191,0.56); border-radius: .106667rem; .turntable-item-golden-bean{ display: block; width: .733333rem; height: .733333rem; margin-bottom: .133333rem; } .turntable-item-coupon{ display: block; width: 1rem; height: .68rem; margin-bottom: .2rem; position:relative; top: .066667rem; } .turntable-item-red-packet{ display: block; width: .613333rem; height: .733333rem; margin-bottom: .186667rem; position: relative; top: .08rem; } .turntable-item-red-thanks{ display: block; width: .826667rem; height: .826667rem; margin-bottom: .106667rem; } .turntable-item-red-instant-win{ display: block; width: .802667rem; height: .802667rem; margin-bottom: .133333rem; } p{ font-family: PingFangSC-Regular; font-size: .293333rem; color: #333333; letter-spacing: 0; text-align: center; } .turntable-item-text-instant-win{ font-family: PingFangSC-Semibold; font-size: .426667rem; color: #FFFFFF; letter-spacing: 0; text-align: center; margin-top: .266667rem; } } .turntable-item-instant-win{ background: linear-gradient(-180deg, #FD9882 0%, #F73B23 100%); border-radius: .106667rem; border-radius: .106667rem; } } .lottery-results{ width: 8.8rem; display: inherit; height: 5.546667rem; margin: 0 auto; background: #FCF8EC; border: 1px solid rgba(255,232,191,0.56); border-radius: .106667rem; .congratulation-sentence{ font-family: PingFangSC-Semibold; font-size: .48rem; color: #FD2103; letter-spacing: 0; text-align: center; margin-top: .573333rem; } .lottery-results-content{ margin-top: .88rem; display: flex; justify-content: space-around; .turntable-item{ margin-left: 0; height: 2.666667rem; border: transparent; .immediately-to-receive{ width: 2.266667rem; height: .826667rem; margin-top: .48rem; line-height: .826667rem; background: #F73B23; border-radius: .453333rem; font-family: PingFangSC-Semibold; font-size: .373333rem; color: #FFFFFF; letter-spacing: 0; text-align: center; } } } } } js： let indexArray = [0, 1, 2, 5, 8, 7, 6, 3] let i = 0; //indexArray的下标 let curItem = 0; //用来储存当前的querySelectorAll let timer = null //定时器 let rotateTime = 0 //转盘转动了多少时间 let rotateSwitchTime = 0 //转盘转动多少时间停下设置 let halfRotateSwitchTime=0 //转盘转动时间的中间值，在这个时间之前加速，在这个时间后减速 window.onload = function () { // 转动时间控制数字 function random(min, max, flag) { console.log(flag); let curRandom = Math.floor(Math.random() * (max - min + 1) + min); console.log('转盘转动curRandom秒后停下', curRandom); if (curRandom === 4 && flag === 'prize') { console.log(min, max, flag); return random(min, max, flag) } else { console.log(curRandom); return curRandom } } //实现九宫格抽奖转盘转动 let turntableRotate = function (startTime) { clearInterval(timer) document.querySelectorAll('.turntable-item')[curItem].style.cssText = "border:none" curItem = indexArray[i] document.querySelectorAll('.turntable-item')[curItem].style.cssText = "border:3px solid red" i++ if (i === indexArray.length) i = 0 // 统计转动时间 rotateTime += startTime if (rotateTime < halfRotateSwitchTime) { // 如果小于一半的停止时间halfRotateSwitchTime，那么就加速 startTime = startTime - 100 // 减速时间不能小于100，否则太快，影响效果 if (startTime === 0) startTime = 100 timer=setInterval(()=>turntableRotate(startTime), startTime) } else if (rotateTime >= halfRotateSwitchTime && rotateTime < rotateSwitchTime) { // 如果大于一半的停止时间halfRotateSwitchTime 且 小于 停止时间,那么就减速 startTime = startTime + 200 timer=setInterval(() => turntableRotate(startTime), startTime) } else if (rotateTime >= rotateSwitchTime) { // 当大于等于 停止时间时，就停止下来 console.log('转动的时间', rotateTime); clearInterval(timer) // 准备抽中奖品Dom let lotteryResultsContent = document.querySelector('.lottery-results-content') //追加奖品 for (k = 0; k < 3; k++) { let CurPrizeItem = winPrize() console.log('此时的prizeItem', CurPrizeItem); CurPrizeItem.style.border = '1px solid transparent' lotteryResultsContent.appendChild(CurPrizeItem) } console.log('抽中的三个商品', lotteryResultsContent); // 抽奖转盘隐藏 document.querySelector('.lottery-turntable').style.display = 'none' // 抽中奖品显示 document.querySelector('.lottery-results').style.display = 'block' } } // 中奖商品展示Item function winPrize() { let prizeOne = random(0, 8, 'prize') let prizeItem = document.querySelectorAll('.turntable-item')[prizeOne].cloneNode(true) let p = document.createElement('p') p.innerText = '立即领取' p.className = 'immediately-to-receive' prizeItem.appendChild(p) return prizeItem } //抽奖点击事件 document.querySelector('.turntable-item-instant-win').onclick = function instantWin() { // 移除点击事件，防止持续点击 document.querySelector('.turntable-item-instant-win').onclick = null // 通过随机数设置转盘转动多少时间停下 rotateSwitchTime = random(3, 7) * 1000 console.log('停止转动的时间', rotateSwitchTime); // console.log('rotateSwitchTime',rotateSwitchTime); //转动时间控制中间数 前半段时间加速，后半段时间减速 halfRotateSwitchTime = parseInt(rotateSwitchTime / 2) // console.log('halfRotateSwitchTime', halfRotateSwitchTime); // 初始的定时器的s数为1000 timer = setInterval(() => turntableRotate(400), 400) } } |
【本文地址】
今日新闻 |
推荐新闻 |