html5实现九宫格抽奖可固定抽中某项奖品

admin html5 2022-02-05 15:19:49 html5 九宫格抽奖抽奖"

原生js写的一个九宫格抽奖程序（周末在家闲着也是闲着）
我写的这个抽奖是拿来整蛊我女朋友，因为每次抽奖的结果都是同一个。。
哈哈哈哈哈哈哈哈哈哈哈哈哈
我会附上正常抽奖的的代码和固定只能抽到某一个的代码；

HTML代码如下 ⤵️

js代码

// 封装工具函数
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);

如果想设置固定抽中某个奖项，// if (count === 40) 这个count的值需要你自己去算一下，图片自己选几个。
代码copy可直接运行。
最终效果，有点丑。你们想玩的自己发挥下吧。