欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5實(shí)現(xiàn)九宮格抽獎(jiǎng)可固定抽中某項(xiàng)獎(jiǎng)品

  發(fā)布時(shí)間：2020-06-15 16:30:03   作者：Damon   我要評(píng)論
這篇文章主要介紹了html5實(shí)現(xiàn)九宮格抽獎(jiǎng)可固定抽中某項(xiàng)獎(jiǎng)品，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

原生js寫(xiě)的一個(gè)九宮格抽獎(jiǎng)程序 （周末在家閑著也是閑著）
我寫(xiě)的這個(gè)抽獎(jiǎng)是拿來(lái)整蠱我女朋友， 因?yàn)槊看纬楠?jiǎng)的結(jié)果都是同一個(gè)。。
哈哈哈哈哈哈哈哈哈哈哈哈哈
我會(huì)附上正常抽獎(jiǎng)的的代碼和固定只能抽到某一個(gè)的代碼；

HTML代碼如下 ⤵️

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽獎(jiǎng)</title>
    <style>
        * {
            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;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="btn-box item">
            <div class="cover" style="background: none;"></div>
            <div class="item-box">
                開(kāi)始抽獎(jiǎng)
            </div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="cover"></div>
            <div class="item-box"></div>
        </div>
    </div>
    <div class="modal-cover"></div>
    <div class="modal" style="display: none;">
        <span></span>
        <div class="confirm-btn">不信邪！再試一次！</div>
    </div>
</body>
<script src="./index.js"></script>

</html>

js代碼👇

// 封裝工具函數(shù)
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');
// 存放每一個(gè)獎(jiǎng)項(xiàng)的下標(biāo)
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 = () => {
    // 先給所有的獎(jiǎng)項(xiàng)盒子加蒙層
    for (let j = 0; j < arr.length; j++) {
        covers[arr[j]].style.background = 'rgba(0, 0, 0, 0.3)';
    }
    // 將當(dāng)前獎(jiǎng)項(xiàng)的遮罩層去除
    covers[arr[i]].style.background = 'none';
    i++;
    if (i === arr.length) {
        i = 0;
    }
     // 通過(guò)count調(diào)整旋轉(zhuǎn)速度
    count++;
    // 根據(jù)count 重新調(diào)整計(jì)時(shí)器速度
    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);
    }
    // 固定抽中某個(gè)獎(jiǎng)項(xiàng)
    // if (count === 40) {
    //     clearInterval(stopTimer);
    //     count = 0;
    //     rand = 0;
    //     setTimeout(() => {
    //         modalInner.innerText = '親！恭喜你中獎(jiǎng)大寶SOD蜜一瓶！^_^ 😄';
    //         modal.style.display = 'block'
    //         mask.style.display = 'block'
    //     }, 500);
    // }

    // 當(dāng)?shù)扔谏厦娴碾S機(jī)數(shù)時(shí)
    if (count === rand) {
        clearInterval(stopTimer);
    }
    // 點(diǎn)擊再試一次
    tryBtn.addEventListener('click', () => {
        modal.style.display = 'none'
        mask.style.display = 'none'
    })


}
// 給開(kāi)始按鈕綁定點(diǎn)擊事件 點(diǎn)擊后執(zhí)行 rotate 
const start = () => {
    console.log(count)
    clearInterval(stopTimer);
    stopTimer = setInterval(rotate, 300);
}
covers[4].addEventListener("click", start);

如果想設(shè)置固定抽中某個(gè)獎(jiǎng)項(xiàng)，// if (count === 40) 這個(gè)count的值需要你自己去算一下，圖片自己選幾個(gè)。
代碼copy可直接運(yùn)行。
最終效果，有點(diǎn)丑。你們想玩的自己發(fā)揮下吧。

到此這篇關(guān)于html5實(shí)現(xiàn)九宮格抽獎(jiǎng)可固定抽中某項(xiàng)獎(jiǎng)品的文章就介紹到這了,更多相關(guān)html5九宮格抽獎(jiǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論