Effect:
Imitate jingdong shopping after the lottery
Ideas:
Click on the instant draw, in a random time to stop rotating wheel, wheel hidden
The prize DOM display, the display of the reward is in the wheel of 8 prizes randomly selected 3, displayed
HTML structure:
<div class="lottery-title-box"> <p class="lottery-title"> <span Class ="lottery-subtitle"> active rule </span> </div> <div class="lottery-turntable"> <img PNG "Alt =""> <p>5 turntable-item </p> </div> <div class="turntable-item"> <img class="turntable-item-coupon" SRC ="./assets/ raffle map /[email protected]" Alt =""> <p> Manage full 1000 less 50</p> </div> <div Class ="turntable-item"> <img class="turntable-item-red-packet" SRC ="./assets/ [email protected]" Alt =""> <p> <div > <div class="turntable-item"> <img class="turntable-item-red-packet" SRC ="./assets/ lottery cut map /[email protected]" Alt =""> <p>1 yuan flow red envelope </p> </div> <div class="turntable-item Turntable-item-instant-win "> <p class="turntable-item-text-instant win"> </p> <img Class ="turntable-item-red-instant-win" SRC ="./assets/ lottery cutout /[email protected]" Alt =""> </div> <div Class ="turntable-item"> <img class="turntable-item-golden-bean" SRC ="./assets/ turntable-item-golden-bean" Alt =""> <p>20 turntable-item </p> </div> <div class="turntable-item"> <img class="turntable-item-golden-bean" SRC ="./assets/ turntable-item-golden-bean" Alt =""> <p>20 turntable-item </p> </div> <div class="turntable-item"> <img class="turntable-item-red-thanks" SRC ="./assets/ raffle slice/good - select @2x.png" Alt =""> <p> <div > <div class="turntable-item"> <img class="turntable-item-coupon" SRC ="./assets/ lucky draw /[email protected]" </p> </div> <div class=" lotter-turntable lottery-results" style="display: none; </p> <div class=" lottery-result-content "> </div> </div>Copy the codeCSS:
.lottery-container{ border-radius: .133333rem; Width: 9.2 rem; Height: 7.293333 rem; 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; The line - height: 1.226667 rem; } .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.8 rem; Height: 1.706667 rem; margin-left: .2rem; margin-bottom: .2rem; background: #FCF8EC; Border: 013333 rem solid rgba (255232191,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.546667 rem; margin: 0 auto; background: #FCF8EC; Border: 1 px solid rgba (255232191,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.666667 rem; border: transparent; . Immediately - to - the receive {width: 2.266667 rem; 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; } } } } }Copy the codeJs:
let indexArray = [0, 1, 2, 5, 8, 7, 6, 3] let i = 0; // let curItem = 0; // querySelectorAll let timer = null // Let rotateTime = 0 Let halfRotateSwitchTime=0 Onload = function () {function random(min, Max, flag) {console.log(flag); let curRandom = Math.floor(Math.random() * (max - min + 1) + min); Console. log(' the dial stops after curRandom ', curRandom); if (curRandom === 4 && flag === 'prize') { console.log(min, max, flag); return random(min, max, flag) } else { console.log(curRandom); Function (startTime) {clearInterval(timer) {return curRandom}} 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) {// If halfRotateSwitchTime is less than half of the stop time, then accelerate startTime = startTime - 100 // Slow down time should not be less than 100, otherwise it is too fast. Impact If (startTime === 0) startTime = 100 timer=setInterval(()=>turntableRotate(startTime), startTime) } else if (rotateTime >= halfRotateSwitchTime && rotateTime < rotateSwitchTime) { // StartTime = startTime + 200 timer=setInterval(() => If halfRotateSwitchTime is larger than half and smaller than the stop time, slow down. TurntableRotate (startTime), startTime)} else if rotateTime >= rotateSwitchTime { Stop console.log(' rotation time ', rotateTime); Dom let lotteryResultsContent = document.querySelector('. Lottery-results-content ') // Append the prize for (k = 0; k < 3; K++) {let CurPrizeItem = winPrize() console.log(' now prizeItem', CurPrizeItem); CurPrizeItem.style.border = '1px solid transparent' lotteryResultsContent.appendChild(CurPrizeItem) } Console. log(' Three items selected ', lotteryResultsContent); // Hidden document.querySelector('.lottery-turntable').style.display = 'none' // Display of selected prizes Document.queryselector ('.lottery-results').style.display = 'block'}} // winPrize() {let prizeOne = random(0, 8, 'prize') let prizeItem = document.querySelectorAll('.turntable-item')[prizeOne].cloneNode(true) let p = Document.createelement ('p') p.innerText = 'immediately 'p.className = 'immediately-to-receive' prizeItem.appendChild(p) return PrizeItem} document.querySelector('.turntable-item-instant-win').onclick = function instantWin() { Keep from hitting Document.querySelector ('.turntable-item-instant-win'). Onclick = null // Set rotateSwitchTime = Random (3, 7) * 1000 console.log(' stop rotation time ', rotateSwitchTime); // console.log('rotateSwitchTime',rotateSwitchTime); // The rotation time controls the first half of the middle period of acceleration, HalfRotateSwitchTime = parseInt(rotateSwitchTime / 2) // console.log('halfRotateSwitchTime', halfRotateSwitchTime); Timer = setInterval(() => turntableRotate(400), 400)}}Copy the code