年会抽奖Html

在这里插入图片描述

<!-- <video id="backgroundMusic" src="file:///D:/background.mp3" loop autoplay></video> -->
<div
    style="width: 290px; height: 580px; margin-left: 20px; margin-top: 20px; background: url('D:/nianhui/zu.png') no-repeat center center; background-size: cover; ">
    <span style="color: #FDF368; top: 60px; font-weight: bold; position: relative; "> <button
            style="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"
            onclick="jixiang()">抽取 吉祥如意(15份)</button></span>
    <br />
    <div style="top: 90px; position: relative;font-size: 20px;">
        <span id="jixing1" style="color: #FDF368; font-size: 20px;"></span>
        <span id="jixing2" style="color: #FDF368;"></span>
        <span id="jixing3" style="color: #FDF368;"></span>
        <span id="jixing4" style="color: #FDF368;"></span>
        <span id="jixing5" style="color: #FDF368;"></span>
        <span id="jixing6" style="color: #FDF368;"></span>
        <span id="jixing7" style="color: #FDF368;"></span>
        <span id="jixing8" style="color: #FDF368;"></span>
        <span id="jixing9" style="color: #FDF368;"></span>
        <span id="jixing10" style="color: #FDF368;"></span>
        <span id="jixing11" style="color: #FDF368;"></span>
        <span id="jixing12" style="color: #FDF368;"></span>
        <span id="jixing13" style="color: #FDF368;"></span>
        <span id="jixing14" style="color: #FDF368;"></span>
        <span id="jixing15" style="color: #FDF368;"></span>

        <div style="position: relative; color: #FDF368; font-weight: bold; top: 30px;"> <button
                style="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"
                onclick="fuixng()">抽取 福星高照(4份)</button> </div>

        <div style="top: 50px; position: relative;">
            <span id="fu1" style="color: #FDF368;"></span>
            <span id="fu2" style="color: #FDF368;"></span>
            <span id="fu3" style="color: #FDF368;"></span>
            <span id="fu4" style="color: #FDF368;"></span>
        </div>

        <div style="position: relative; color: #FDF368; font-weight: bold; top: 70px;"> <button
                style="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"
                onclick="hongyun()">抽取 鸿运当头(1份)</button> </div>

        <div style="position: relative; top: 90px; color: #FDF368;">
            <span id="hong" style="color: #FDF368;"></span>
        </div>
        <div style="position: relative; color: #FDF368; font-weight: bold; top: 120px;"> <button
                style="color: #FDF368; background-color:rgb(219, 0, 1) ; border:0px ;font-size: 30px;"
                onclick="desk()">抽取 桌奖</button> </div>
    </div>
</div>


<div class="container" id="containers" style="margin-top: -25%; align-items: center;">
    <div class="result" id="result" ">
        <div class=" image-wrapper1" id="mage-wrapper1"
        style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px;  background-size: cover;"
        onclick="chongzhi(1)">
        <span id="div1"
            style="font-weight: bold; color: #FDF368; font-size: 98px; animation: pulse 1.5s infinite; top: 88px; position: relative; ">🎉</span>
    </div>
    <div class="image-wrapper2" id="mage-wrapper2"
        style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px; background-size: cover;"
        onclick="chongzhi(2)">
        <span id="div2"
            style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; animation: pulse 1.5s infinite; position: relative;">🎉</span>
    </div>
    <div class="image-wrapper3" id="mage-wrapper3"
        style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px;background-size: cover;"
        onclick="chongzhi(3)">
        <span id="div3"
            style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; position: relative; animation: pulse 1.5s infinite;">🎉</span>
    </div>
    <div class="image-wrapper4" id="mage-wrapper4"
        style="background:url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px;background-size: cover;"
        onclick="chongzhi(4)">
        <span id="div4"
            style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; position: relative; animation: pulse 1.5s infinite;">🎉</span>
    </div>
    <div class="image-wrapper5" id="mage-wrapper5"
        style="background: url('D:/nianhui/num.png'); width: 365px; height: 295px; margin-left: 10px;background-size: cover;"
        onclick="chongzhi(5)">
        <span id="div5"
            style="font-weight: bold; color: #FDF368; font-size: 98px; top: 88px; position: relative; animation: pulse 1.5s infinite;">🎉</span>
    </div>
</div>

<span id="xianshi"
    style="color: #FDF368; font-size: 50px; margin-top: 100px; position: relative; left: -100px;">准备抽奖...</span>
<div style="top:96%; left: 80px; position: absolute;">

    <button id="startButton" class="custom-button" onclick="btnStart()"> <span
            style="font-size: 10px; ">开始</span></button>


    <!-- <button id="stopButton" class="custom-button" style="margin-left: 60px;" onclick="btnStop()" disabled>重置</button> -->
</div>
<div style="top:96%; left: 150px; position: absolute;">

    <button id="stopButton" class="custom-button" style="margin-left: 60px;" onclick="btnStop()" disabled><span
            style="font-size: 10px;">暂停</span></button>
</div>
<div id="poke" onclick="checkPoke()"
    style="border-radius: 4% 4% 4% 4%;display: none;background-image:url('D:/nianhui/num.png');width: 400px;height: 600px;position: relative;left: 300px;background-repeat: no-repeat;background-size: 100% 100%;">

</div>
<div id="deskSpanDiv"
    style="display: none;background: url('D:/nianhui/num.png'); width: 400px; height: 600px; position: relative;top: -600px;left: 800px;background-size: cover;background-size: 100% 100%;background-repeat: no-repeat;">
    <span id="deskSpan"
        style="font-size: 180px;font-weight: bold;position: relative;left: 10px;top:180px;color: #FDF368;">
        🎉
    </span>
</div>

<video name="media" style="width: 20px; height: 20px; position: absolute;  left: 1900px;" controls autoplay loop>
    <source src="file:///D:/nianhui/background.mp3" type="audio/mpeg">
</video>
</div>

<script>
    const allNumbers = Array.from({ length: 200 }, (_, i) => i + 5901); // 数字 5901-6100
    const drawnNumbers = new Set();
    const jixingNumber = getRandomNumbers(15);
    const fuNumber = getRandomNumbers(4);
    const hongNumber = getRandomNumbers(1);
    const oneArray = [];
    const twoArray = [];
    const hongArray = [];
    let chou = "ji";
    let currentStep = 0;
    let interval;
    let isRunning = false;

    //桌奖抽取
    var deskJPPoke = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    var deskNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var deskNum1 = [11, 12];
    var deskNum2 = [13];
    var checkPokeIndex = -1;
    var pickPokeList = [];
    var isClick = true;
    function chongzhi(val) {

        if (chou == 'hong') {
            return
        }

        const modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '50%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.color = '#fff';
        modal.style.padding = '20px';
        modal.style.borderRadius = '10px';
        modal.style.textAlign = 'center';
        modal.style.fontSize = '18px';
        modal.style.width = '400px';
        modal.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';

        // 弹框内容
        modal.innerHTML = `
    <p>是否确认该数字重抽?</p>
    <button id="confirmBtn" style="margin: 10px; padding: 8px 16px; font-size: 16px; border: none; border-radius: 5px; background: #28a745; color: white; cursor: pointer;">确认</button>
    <button id="cancelBtn" style="margin: 10px; padding: 8px 16px; font-size: 16px; border: none; border-radius: 5px; background: #dc3545; color: white; cursor: pointer;">取消</button>
`;

        // 添加到页面
        document.body.appendChild(modal);

        // 添加事件监听器
        document.getElementById('confirmBtn').addEventListener('click', () => {
            const randomNumber = getRandomNumbers(1); // 生成随机数
            // alert(`新的随机数为: ${randomNumber}`);
            if (chou == 'ji') {
                let it = 'jixing' + oneArray.length;
                let its = "div" + val
                intervals = setInterval(() => anim(val), 50);

                setTimeout(() => {
                    // 更新指定元素的文本内容
                    clearInterval(intervals);
                    document.getElementById(it).innerText = randomNumber; // 第一位数字
                    document.getElementById(its).innerHTML = randomNumber;
                }, 2000); // 3秒后执行
                //写一个定时器 3s的

            } else if (chou == 'fu') {
                let it = 'fu' + twoArray.length;
                let its = "div" + val
                intervals = setInterval(() => anim(val), 50);

                setTimeout(() => {
                    // 更新指定元素的文本内容
                    clearInterval(intervals);
                    document.getElementById(it).innerText = randomNumber; // 第一位数字
                    document.getElementById(its).innerHTML = randomNumber;
                }, 2000); // 3秒后执行
                //写一个定时器 3s的
            }

            document.body.removeChild(modal); // 移除弹框
        });

        document.getElementById('cancelBtn').addEventListener('click', () => {
            // alert('操作已取消');
            document.body.removeChild(modal); // 移除弹框
        });
    }
    function anim(val) {
        const randomNumber1 = Math.floor(Math.random() * 201) + 5900;
        let consts = 'div' + val
        document.getElementById(consts).innerText = randomNumber1;
    }

    document.addEventListener('keydown', function (event) {
        console.log(event.key)
        if (event.key === 'Enter') {
            if (isClick) {
                btnStart();
            } else {
                btnStop();
            }
            isClick = !isClick;
        }
        if (event.key === 'b' || event.key === 'B') {
            checkPoke();
        }
    })

    function jixiang() {
        chou = "ji"
        // 在这里写一个很好看的弹框  alert('开始抽取吉祥如意')
        var modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '50%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.color = '#fff';
        modal.style.padding = '20px';
        modal.style.borderRadius = '10px';
        modal.style.textAlign = 'center';
        modal.style.fontSize = '80px';
        modal.style.width = '700px';
        modal.style.height = '120px';
        modal.innerHTML = '开始抽取吉祥如意';

        // 在页面中添加弹框
        document.body.appendChild(modal);
        document.getElementById("div1").innerText = "🎉"; // 第一位数字
        document.getElementById("div2").innerText = "🎉"; // 第一位数字
        document.getElementById("div3").innerText = "🎉"; // 第一位数字
        document.getElementById("div4").innerText = "🎉"; // 第一位数字
        document.getElementById("div5").innerText = "🎉"; // 第一位数字
        document.getElementById("xianshi").innerText = '吉祥如意抽奖中...';

        const resultDivs = document.getElementById('mage-wrapper5'); // 获取要隐藏的块
        if (resultDivs) {
            resultDivs.style.display = 'block'; // 设置 display 为 none,隐藏块

        }

        const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块
        if (resultDivsDesk1) {
            resultDivsDesk1.style.display = 'none'; // 设置 display 为 none,隐藏块

        }

        const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块
        if (resultDivsDesk2) {
            resultDivsDesk2.style.display = 'none'; // 设置 display 为 none,隐藏块

        }

        const resultDivs2 = document.getElementById('mage-wrapper4'); // 获取要隐藏的块
        if (resultDivs2) {
            resultDivs2.style.display = 'block'; // 设置 display 为 none,隐藏块

        }

        const resultDivs3 = document.getElementById('mage-wrapper3'); // 获取要隐藏的块
        if (resultDivs3) {
            resultDivs3.style.display = 'block'; // 设置 display 为 none,隐藏块

        }

        const resultDivs4 = document.getElementById('mage-wrapper2'); // 获取要隐藏的块
        if (resultDivs4) {
            resultDivs4.style.display = 'block'; // 设置 display 为 none,隐藏块

        }



        const resultDivss = document.getElementById('mage-wrapper1'); // 获取要隐藏的块
        if (resultDivss) {
            resultDivss.style.display = 'block'; // 设置 display 为 none,隐藏块
        }


        const contaions = document.getElementById('containers'); // 获取要隐藏的块

        if (contaions) {
            contaions.style.maxWidth = '1600px'; // 设置 display 为 none,隐藏块
        }


        // 自动隐藏弹框,2秒后消失
        setTimeout(function () {
            document.body.removeChild(modal);
        }, 2000);
    }

    function fuixng() {

        chou = "fu"
        var modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '50%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.color = '#fff';
        modal.style.padding = '20px';
        modal.style.borderRadius = '10px';
        modal.style.textAlign = 'center';
        modal.style.fontSize = '80px';
        modal.style.width = '700px';
        modal.style.height = '120px';
        modal.innerHTML = '开始抽取福星高照';

        // 在页面中添加弹框
        document.body.appendChild(modal);
        document.getElementById("div1").innerText = "🎉"; // 第一位数字
        document.getElementById("div2").innerText = "🎉"; // 第一位数字
        document.getElementById("div3").innerText = "🎉"; // 第一位数字
        document.getElementById("div4").innerText = "🎉"; // 第一位数字
        document.getElementById("div5").innerText = "🎉"; // 第一位数字

        const resultDiv = document.getElementById('mage-wrapper5'); // 获取要隐藏的块
        if (resultDiv) {
            resultDiv.style.display = 'none'; // 设置 display 为 none,隐藏块
        }

        const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块
        if (resultDivsDesk1) {
            resultDivsDesk1.style.display = 'none'; // 设置 display 为 none,隐藏块

        }

        const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块
        if (resultDivsDesk2) {
            resultDivsDesk2.style.display = 'none'; // 设置 display 为 none,隐藏块

        }


        const resultDive = document.getElementById('mage-wrapper1'); // 获取要隐藏的块
        if (resultDive) {
            resultDive.style.display = 'block'; // 设置 display 为 none,隐藏块
        }

        const contaions = document.getElementById('containers'); // 获取要隐藏的块

        if (contaions) {
            contaions.style.maxWidth = '1230px'; // 设置 display 为 none,隐藏块
        }
        document.getElementById("xianshi").innerText = '福星高照抽奖中...';
        // 自动隐藏弹框,2秒后消失
        setTimeout(function () {
            document.body.removeChild(modal);
        }, 2000);
    }

    function hongyun() {

        chou = "hong"
        var modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '50%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.color = '#fff';
        modal.style.padding = '20px';
        modal.style.borderRadius = '10px';
        modal.style.textAlign = 'center';
        modal.style.fontSize = '80px';
        modal.style.width = '700px';
        modal.style.height = '120px';
        modal.innerHTML = '开始抽鸿运当头';


        document.getElementById("div1").innerText = "🎉"; // 第一位数字
        document.getElementById("div2").innerText = "🎉"; // 第一位数字
        document.getElementById("div3").innerText = "🎉"; // 第一位数字
        document.getElementById("div4").innerText = "🎉"; // 第一位数字
        document.getElementById("div5").innerText = "🎉"; // 第一位数字
        document.getElementById("xianshi").innerText = '鸿运当头抽奖中...';
        const resultDivs = document.getElementById('mage-wrapper5'); // 获取要隐藏的块
        if (resultDivs) {
            resultDivs.style.display = 'block'; // 设置 display 为 none,隐藏块
        }
        const resultDive = document.getElementById('mage-wrapper1'); // 获取要隐藏的块
        if (resultDive) {
            resultDive.style.display = 'none'; // 设置 display 为 none,隐藏块
        }
        const contaions = document.getElementById('containers'); // 获取要隐藏的块

        if (contaions) {
            contaions.style.maxWidth = '1230px'; // 设置 display 为 none,隐藏块
        }

        const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块
        if (resultDivsDesk1) {
            resultDivsDesk1.style.display = 'none'; // 设置 display 为 none,隐藏块

        }

        const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块
        if (resultDivsDesk2) {
            resultDivsDesk2.style.display = 'none'; // 设置 display 为 none,隐藏块

        }

        // 在页面中添加弹框
        document.body.appendChild(modal);

        // 自动隐藏弹框,2秒后消失
        setTimeout(function () {
            document.body.removeChild(modal);
        }, 2000);
    }
    function desk() {
        chou = 'desk';
        var modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '40%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.color = '#fff';
        modal.style.padding = '20px';
        modal.style.borderRadius = '10px';
        modal.style.textAlign = 'center';
        modal.style.fontSize = '80px';
        modal.style.width = '700px';
        modal.style.height = '120px';
        modal.innerHTML = '开始抽取桌奖';
        document.getElementById("xianshi").innerText = '桌奖抽奖中...';
        const resultDivss = document.getElementById('mage-wrapper1'); // 获取要隐藏的块
        if (resultDivss) {
            resultDivss.style.display = 'none'; // 设置 display 为 none,隐藏块
        }
        const resultDivss1 = document.getElementById('mage-wrapper2'); // 获取要隐藏的块
        if (resultDivss1) {
            resultDivss1.style.display = 'none'; // 设置 display 为 none,隐藏块
        }
        const resultDivss2 = document.getElementById('mage-wrapper3'); // 获取要隐藏的块
        if (resultDivss2) {
            resultDivss2.style.display = 'none'; // 设置 display 为 none,隐藏块
        }
        const resultDivss3 = document.getElementById('mage-wrapper4'); // 获取要隐藏的块
        if (resultDivss3) {
            resultDivss3.style.display = 'none'; // 设置 display 为 none,隐藏块
        }
        const resultDivss4 = document.getElementById('mage-wrapper5'); // 获取要隐藏的块
        if (resultDivss4) {
            resultDivss4.style.display = 'none'; // 设置 display 为 none,隐藏块
        }
        const resultDivsDesk1 = document.getElementById('poke'); // 获取要隐藏的块
        if (resultDivsDesk1) {
            resultDivsDesk1.style.display = 'block'; // 设置 display 为 none,隐藏块

        }

        const resultDivsDesk2 = document.getElementById('deskSpanDiv'); // 获取要隐藏的块
        if (resultDivsDesk2) {
            resultDivsDesk2.style.display = 'block'; // 设置 display 为 none,隐藏块

        }

    }

    function getRandomNumbers(count) {
        const availableNumbers = allNumbers.filter(num => !drawnNumbers.has(num));
        const selectedNumbers = [];
        for (let i = 0; i < count; i++) {
            if (availableNumbers.length === 0) break;
            const randomIndex = Math.floor(Math.random() * availableNumbers.length);
            const number = availableNumbers.splice(randomIndex, 1)[0];
            selectedNumbers.push(number);
            drawnNumbers.add(number);
        }

        return selectedNumbers;
    }

    function btnStart() {
        if (chou == "ji" && oneArray.length == 5) {
            document.getElementById("div1").innerText = "🎉"; // 第一位数字
            document.getElementById("div2").innerText = "🎉"; // 第一位数字
            document.getElementById("div3").innerText = "🎉"; // 第一位数字
            document.getElementById("div4").innerText = "🎉"; // 第一位数字
            document.getElementById("div5").innerText = "🎉"; // 第一位数字
        }
        if (chou == 'ji' && oneArray.length == 10) {
            document.getElementById("div1").innerText = "🎉"; // 第一位数字
            document.getElementById("div2").innerText = "🎉"; // 第一位数字
            document.getElementById("div3").innerText = "🎉"; // 第一位数字
            document.getElementById("div4").innerText = "🎉"; // 第一位数字
            document.getElementById("div5").innerText = "🎉"; // 第一位数字
        }

        if (chou == 'ji' && oneArray.length >= 15) {
            var modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = '50%';
            modal.style.left = '50%';
            modal.style.width = '500px';
            modal.style.height = '140px';
            modal.style.transform = 'translate(-50%, -50%)';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
            modal.style.color = '#fff';
            modal.style.padding = '20px';
            modal.style.borderRadius = '10px';
            modal.style.textAlign = 'center';
            modal.style.fontSize = '80px';
            modal.innerHTML = '该奖项已抽完';

            // 在页面中添加弹框
            document.body.appendChild(modal);

            // 自动隐藏弹框,2秒后消失
            setTimeout(function () {
                document.body.removeChild(modal);
            }, 2000);
            return
        }


        if (chou == 'fu' && twoArray.length >= 4) {
            var modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = '50%';
            modal.style.left = '50%';
            modal.style.transform = 'translate(-50%, -50%)';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
            modal.style.color = '#fff';
            modal.style.padding = '20px';
            modal.style.width = '500px';
            modal.style.height = '140px';
            modal.style.borderRadius = '10px';
            modal.style.textAlign = 'center';
            modal.style.fontSize = '80px';
            modal.innerHTML = '该奖项已抽完';

            // 在页面中添加弹框
            document.body.appendChild(modal);

            // 自动隐藏弹框,2秒后消失
            setTimeout(function () {
                document.body.removeChild(modal);
            }, 2000);
            return
        }
        if (isRunning) return;
        isRunning = true;
        console.log("123");
        document.getElementById("startButton").disabled = true;
        document.getElementById("stopButton").disabled = false;
        interval = setInterval(animateNumbers, 50);
    }

    function btnStop() {
        clearInterval(interval);
        document.getElementById("stopButton").disabled = true;
        if (chou == 'ji') {
            console.log("JI");
            // 第一位数字
            if (oneArray.length >= 5 && oneArray.length < 10) {
                let consts = 'div' + (oneArray.length + 1 - 5)
                document.getElementById(consts).innerText = jixingNumber[oneArray.length];
                oneArray.push(document.getElementById(consts).innerText)
            } else if (oneArray.length >= 10 && oneArray.length < 15) {
                let consts = 'div' + (oneArray.length + 1 - 10)
                document.getElementById(consts).innerText = jixingNumber[oneArray.length];
                oneArray.push(document.getElementById(consts).innerText)
            }
            else {
                let consts = 'div' + (oneArray.length + 1)
                document.getElementById(consts).innerText = jixingNumber[oneArray.length];
                oneArray.push(document.getElementById(consts).innerText)
            }

        } else if (chou == 'fu') {
            // document.getElementById("div1").innerText = fuNumber[0]; // 第一位数字
            // document.getElementById("div2").innerText = fuNumber[1]; // 第二位数字
            let consts = 'div' + (twoArray.length + 1)
            document.getElementById(consts).innerText = fuNumber[twoArray.length]; // 第一位数字\
            twoArray.push(document.getElementById(consts).innerText)
        } else if (chou == 'hong') {
            let hoong1 = 'div' + (5 - hongArray.length)
            if (hongArray.length == 0) {
                document.getElementById(hoong1).innerText = hongNumber[0] % 10;; // 第一位数字
                hongArray.push('1')

                //   hongArray.push(document.getElementById(hoong1).innerText)
            } else if (hongArray.length == 1) {

                document.getElementById(hoong1).innerText = Math.floor((hongNumber[0] / 10) % 10); // 位数字

                hongArray.push('2')

            } else if (hongArray.length == 2) {
                document.getElementById(hoong1).innerText = Math.floor((hongNumber[0] / 100) % 10); // 第一位数字
                hongArray.push('3')

            } else if (hongArray.length == 3) {
                document.getElementById(hoong1).innerText = Math.floor((hongNumber[0] / 1000) % 10); // 第一位数字
                hongArray.push(document.getElementById(hoong1).innerText)

                let arr = 'hong'
                document.getElementById(arr).innerText = hongNumber[0];
                hongArray.push('4')
            }

        } else if (chou == 'desk') {
	isChoice++;

console.log(isChoice);

if (isChoice == 13) {

var modal = document.createElement('div');

modal.style.position = 'fixed';

modal.style.top = '50%';

modal.style.left = '50%';

modal.style.transform = 'translate(-50%, -50%)';

modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';

modal.style.color = '#fff';

modal.style.padding = '20px';

modal.style.borderRadius = '10px';

modal.style.textAlign = 'center';

modal.style.fontSize = '80px';

modal.style.width = '700px';

modal.style.height = '120px';

modal.innerHTML = '桌奖抽取已完成!!!谢谢支持!!';

        // 在页面中添加弹框
        document.body.appendChild(modal);

        // 自动隐藏弹框,2秒后消失
        setTimeout(function () {
            document.body.removeChild(modal);
        }, 2000);
            } else {
                // console.log(JSON.stringify(checkPokeIndex), 9999)
                // console.log(JSON.stringify(pickPokeList),8888)
                if (pickPokeList.includes(checkPokeIndex)) {
                   console.log("存在");
                  
                } else {
                 //   pickPokeList.push(checkPokeIndex);
                }
	
                //移除当前卡组
                pickPokeList.push(checkPokeIndex);
                if (checkPokeIndex <= 10) {
                    const randomNum = deskNum[Math.floor(Math.random() * deskNum.length)];
                    let dom = 'deskSpan';
                    document.getElementById(dom).innerText = randomNum;
                    deskNum = deskNum.filter(item => item != randomNum);
                   // deskNum = deskNum
                } else if (checkPokeIndex > 10 && checkPokeIndex < 13) {
                    const randomNum = deskNum1[Math.floor(Math.random() * deskNum1.length)];
                    let dom = 'deskSpan';
                    document.getElementById(dom).innerText = randomNum;
                  deskNum1 = deskNum1.filter(item => item != randomNum);
                    //  deskNum1 = deskNum1
                } else {
                    const randomNum = deskNum2[Math.floor(Math.random() * deskNum2.length)];
                    let dom = 'deskSpan';
                    document.getElementById(dom).innerText = randomNum;
                    deskNum2 = deskNum2.filter(item => item != randomNum);
                 // deskNum2 = deskNum2;
                }

                deskJPPoke = deskJPPoke.filter(item => !pickPokeList.includes(item));
            }
        }


        revealResult();
    }
let isChoice=0;
let checkData=[];

    function checkPoke() {
        const randomNum = deskJPPoke[Math.floor(Math.random() * deskJPPoke.length)];
        let dom = 'poke';
        checkPokeIndex = randomNum;
        document.getElementById(dom).style.backgroundImage = 'url(D:/nianhui/poke/' + checkPokeIndex + '.jpg)';
    }


    function animateNumbers() {
        // 生成范围在 5900 到 6100 的随机数字
        const randomNumber1 = Math.floor(Math.random() * 201) + 5900; // 生成 5900 到 6100

        const randomNumber = Math.random() < 0.5 ? 5 : 6;
        const randomNumber6 = Math.floor(Math.random() * 9) + 1; // 1 到 9
        if (chou == "ji") {
            if (oneArray.length >= 5 && oneArray.length < 10) {
                let consts = 'div' + (oneArray.length + 1 - 5)
                document.getElementById(consts).innerText = randomNumber1;
                // return
            } else if (oneArray.length >= 10 && oneArray.length < 15) {
                let consts = 'div' + (oneArray.length + 1 - 10)
                document.getElementById(consts).innerText = randomNumber1;
                // return
            }
            else {
                let consts = 'div' + (oneArray.length + 1)
                document.getElementById(consts).innerText = randomNumber1; // 第一位数字
            }
        } else if (chou == "fu") {
            let constss = 'div' + (twoArray.length + 1)
            document.getElementById(constss).innerText = randomNumber1; // 第一位数字


        } else if (chou == "hong") {

            let hoong1 = 'div' + (5 - hongArray.length)
            if (hongArray.length == 3) {
                document.getElementById(hoong1).innerText = randomNumber; // 第一位数字
            } else {
                document.getElementById(hoong1).innerText = randomNumber6; // 第一位数字
            }

        } else if (chou == "desk") {
            const randomNum = Math.floor(Math.random() * 9) + 7;
            let dom = 'deskSpan';
            document.getElementById(dom).innerText = randomNum;
        }
    }


    function revealResult() {
        if (chou == "ji") {
            // if (oneArray.length > 5) {
            //     //   alert(1)
            //     return
            // }
            // alert(2)
            let arr = 'jixing' + (oneArray.length)
            document.getElementById(arr).innerText = jixingNumber[oneArray.length - 1];
            isRunning = false;
            document.getElementById("startButton").disabled = false;
        } else if (chou == "fu") {
            let arr = 'fu' + (twoArray.length)
            document.getElementById(arr).innerText = fuNumber[twoArray.length - 1];
            isRunning = false;
            document.getElementById("startButton").disabled = false;
        } else if (chou == "hong" && hongArray.length == 4) {

            isRunning = false;
            document.getElementById("startButton").disabled = false;
        } else {
            isRunning = false;
            document.getElementById("startButton").disabled = false;
        }

    }
</script>
相关推荐
HelloZheQ22 分钟前
CSS 伪类和伪元素:为你的选择器注入更多活力
前端·css
吃杠碰小鸡22 分钟前
css中的部分文字特性
前端·css
请叫我飞哥@1 小时前
HTML5 波动动画(Pulse Animation)详解
前端·html·html5
爱编程的鱼3 小时前
用豆包MarsCode IDE打造精美数据大屏:从零开始的指南
ide·html·css3
PieroPc4 小时前
特制一个自己的UI库,只用CSS、图标、emoji图 日后慢用!!!
javascript·css·ui
HelloZheQ4 小时前
CSS 变量:让你的样式更灵活、更易维护
前端·css·tensorflow
荆州克莱6 小时前
【Azure Redis 缓存】Azure Redis 遇见的连接不上问题和数据丢失的情况解答
spring boot·spring·spring cloud·css3·技术
放飞自我的Coder8 小时前
【python/html 鼠标点选/框选图片内容】
css·python·html
赔罪10 小时前
HTML-多媒体标签
前端·vscode·html·webstorm
大雄野比11 小时前
CSS 实现字体颜色渐变
前端·css