html5实现九宫格抽奖可固定抽中某项奖品jquery九宫格抽奖转盘特效源码ivx平台开发之不用代码实现一个九宫格抽奖功能

 开始抽奖 
不信邪！再试一次！

 // 封装工具函数 const util = { getELe: (str) => { return document.querySelector(str) }, getELes: (str) => { return document.querySelectorAll(str) } } let items = util.getELes(".item-box"), covers = util.getELes('.cover'), imgArr = ['CHANEL', 'Dior', 'givenchy', 'dabao', 'empty', 'lamer', 'lancome', 'yashilandai', 'YSL', ] for (let i = 0; i < items.length; i++) { if (imgArr[i] === 'empty') continue; let el = items[i]; el.style.backgroundImage = `url(./img/${imgArr[i]}.png)` } let modal = util.getELe('.modal'), mask = util.getELe('.modal-cover'), modalInner = util.getELe('.modal span'); let tryBtn = util.getELe('.confirm-btn'); // 存放每一个奖项的下标 let arr = [0, 1, 2, 5, 8, 7, 6, 3], i = 0, count = 0, stopTimer; let rand = Math.floor(Math.random() * 8 + 50); const rotate = () => { // 先给所有的奖项盒子加蒙层 for (let j = 0; j < arr.length; j++) { covers[arr[j]].style.background = 'rgba(0, 0, 0, 0.3)'; } // 将当前奖项的遮罩层去除 covers[arr[i]].style.background = 'none'; i++; if (i === arr.length) { i = 0; } // 通过count调整旋转速度 count++; // 根据count 重新调整计时器速度 if (count === 5 || count === 45) { clearInterval(stopTimer); stopTimer = setInterval(rotate, 200); } if (count === 10 || count === 35) { clearInterval(stopTimer); stopTimer = setInterval(rotate, 100); } if (count === 15) { clearInterval(stopTimer); stopTimer = setInterval(rotate, 50); } // 固定抽中某个奖项 // if (count === 40) { // clearInterval(stopTimer); // count = 0; // rand = 0; // setTimeout(() => { // modalInner.innerText = '亲！恭喜你中奖大宝SOD蜜一瓶！^_^ 😄'; // modal.style.display = 'block' // mask.style.display = 'block' // }, 500); // } // 当等于上面的随机数时 if (count === rand) { clearInterval(stopTimer); } // 点击再试一次 tryBtn.addEventListener('click', () => { modal.style.display = 'none' mask.style.display = 'none' }) } // 给开始按钮绑定点击事件 点击后执行 rotate const start = () => { console.log(count) clearInterval(stopTimer); stopTimer = setInterval(rotate, 300); } covers[4].addEventListener("click", start);