html5抽奖-html5实现九宫格中奖可固定抽一定奖品

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

原生js写的九方抽奖程序（放假在家闲着也闲着）

我写的中奖彩票是用来恶搞我的女同事的，因为每次中奖的结果都是一样的。 。

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

我会附上正常的中奖码和只能抽到某一个的固定码；

HTML代码如下⤵️

    
    
    
    
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html,
        body,
        .modal-cover {
            width: 100%;
            height: 100%;
        }
        body {
            background: url('./img/background.jpg') no-repeat center;
            background-size: 100% 100%;
            overflow: hidden;
        }
        .container {
            width: 90%;
            height: 300px;
            /* width: 831px; */
            height: 336px;
            /* border: 1px solid; */
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
            border-radius: 6px;
            background: #fff;
            padding: 5px 0 5px 10px;
        }
        .item {
            width: 30%;
            height: 30%;
            /* outline: 1px solid black; */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18;
            border-radius: 2px;
            /* border: 1px solid; */
            margin: 4px;
            box-shadow: 1px 1px 14px #ccc;
            position: relative;
        }
        .cover {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            top: 0;
            left: 0;
            border-radius: 2px;
        }
        .item-box {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .btn-box {
            background-color: #faa5b6;
            cursor: pointer;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 100px;
        }
        .modal {
            width: 80%;
            height: 150px;
            position: fixed;
            top: 50%;
            left: 50%;
            background: rgba(255, 255, 255, 255);
            border-radius: 4px;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 20px 10px 10px;
            z-index: 2;
        }
        .modal .confirm-btn {
            background: pink;
            width: 170px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            cursor: pointer;
            border-radius: 4px;
        }
        .modal-cover {
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
            display: none;
        }
    


    

        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

                开始抽奖
            
        
        

            

            

        
        

            

            

        
        

            

            

        
        

            

            

        
    
    

    

        
        
不信邪！再试一次！
    

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  {
    // 先给所有的奖项盒子加蒙层
    for (let j = 0; j  {
    //         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);

如果想设置固定奖品html5抽奖，需要自己计算count的值//if(count===40)，自己选择几张图片。

复制代码可以直接运行。

最后的效果有点难看。 让我们玩我们想玩的吧。

html5实现九宫格中奖可用于抽奖的这篇文章到此结束。 更多关于html5九宫格获奖内容html5抽奖，请搜索开发者网往期文章或继续浏览下方相关文章。 希望大家继续对脚本之家多多支持！