闲来无事，鼓捣一个简单的小工具-优快云博客

本文链接：https://blog.youkuaiyun.com/Perfectmans/article/details/144471136
一个简单的抽奖程序

一个简单的web抽奖程序，也是自己学习下html相关知识，这里仅作记录
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖程序</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        
        #result {
            font-size: 24px;
            color: #333;
            margin-top: 20px;
            transition: color 0.5s ease;
        }
        
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        
        input[type="number"] {
            padding: 5px;
            font-size: 16px;
            width: 50px;
        }
        /* 弹窗样式 */
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 2px;
            border: 1px solid #888;
            width: 80%;
            height: 380px;
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        .full-width-textarea {
            width: 80%;
            height: 150px;
            margin: 10px 0;
        }
        
        .instructions {
            font-size: 14px;
            /* 设置字体大小 */
            color: #555;
            /* 设置字体颜色 */
            margin: 5px 0;
            /* 设置上下边距 */
        }
    </style>
</head>

<body>

    <h1>抽奖程序</h1>
    <label for="numWinners">抽取获胜者数量:</label>
    <input type="number" id="numWinners" min="1" max="10" value="3">
    <button id="setDataButton">设置参与者</button>
    <button id="drawButton">开始抽奖</button>
    <div id="result"></div>

    <!-- 弹窗 -->
    <div id="dataModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>输入参与者名单</h2>
            <p class="instructions">请在这里输入参与者的名字，每个名字之间用英文逗号隔开。例如：John Doe, Jane Smith, Alice Johnson </p>
            <textarea id="dataInput" class="full-width-textarea" placeholder="请输入参与者名字，用英文逗号隔开"></textarea>
            <br>
            <button id="saveButton">保存</button>
            <button id="cancelButton">取消</button>
        </div>
    </div>

    <script>
        // 参与者名单，初始为空
        let participants = [];

        // 获取 DOM 元素
        const drawButton = document.getElementById('drawButton');
        const resultDiv = document.getElementById('result');
        const numWinnersInput = document.getElementById('numWinners');
        const setDataButton = document.getElementById('setDataButton');
        const dataModal = document.getElementById('dataModal');
        const dataInput = document.getElementById('dataInput');
        const saveButton = document.getElementById('saveButton');
        const cancelButton2 = document.getElementById('cancelButton');
        const cancelButton = document.getElementsByClassName('close')[0];

        // 抽奖函数
        function drawWinners(numWinners) {
            if (participants.length < numWinners) {
                resultDiv.textContent = "参与者不足！";
                return;
            }

            const winners = [];
            let currentRollIndex = 0;
            let rollInterval; // 需要在函数内部定义，但需要在循环外部保持引用

            // 模拟滚动效果的函数
            function rollParticipants() {
                const randomIndex = Math.floor(Math.random() * participants.length);
                resultDiv.textContent = participants[randomIndex];
                resultDiv.style.color = "#333"; // 恢复默认颜色
            }

            // 抽取一个获胜者的函数
            function drawOneWinner() {
                if (currentRollIndex >= numWinners) {
                    // 所有获胜者都已抽取完毕，显示最终结果
                    clearInterval(rollInterval);
                    resultDiv.textContent = `恭喜以下 ${numWinners} 位获胜者：${winners.join(", ")}`;
                    resultDiv.style.color = "green";
                    return;
                }

                // 开始滚动
                rollInterval = setInterval(rollParticipants, 50);

                // 3秒后停止滚动并抽取获胜者
                setTimeout(() => {
                    clearInterval(rollInterval);

                    // 随机选择一个获胜者
                    const winnerIndex = Math.floor(Math.random() * participants.length);
                    const winner = participants[winnerIndex];
                    winners.push(winner);
                    participants.splice(winnerIndex, 1);

                    // 显示当前获胜者并改变颜色
                    resultDiv.textContent = `第 ${currentRollIndex + 1} 位获胜者：${winner}`;
                    resultDiv.style.color = "green";

                    // 更新索引并等待2秒后继续抽取下一个获胜者
                    currentRollIndex++;
                    setTimeout(drawOneWinner, 2000); // 2秒后抽取下一个获胜者
                }, 3000); // 3秒后停止滚动
            }

            // 开始抽取第一个获胜者前的提示
            resultDiv.textContent = `正在抽取第 1 位获胜者...`;

            // 开始抽取第一个获胜者
            setTimeout(drawOneWinner, 3000); // 3秒后开始抽取第一个获胜者
        }

        // 绑定按钮点击事件
        drawButton.addEventListener('click', () => {
            const numWinners = parseInt(numWinnersInput.value, 10);
            if (isNaN(numWinners) || numWinners < 1) {
                alert("请输入有效的获胜者数量！");
                return;
            }
            drawWinners(numWinners);
        });

        // 显示弹窗
        setDataButton.onclick = function() {
            dataModal.style.display = "block";
        }

        // 关闭弹窗
        cancelButton.onclick = function() {
                dataModal.style.display = "none";
            }
            // 取消按钮
        cancelButton2.onclick = function() {
            dataModal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == dataModal) {
                dataModal.style.display = "none";
            }
        }

        // 保存参与者名单
        saveButton.onclick = function() {
            participants = dataInput.value.split(',').map(name => name.trim());
            dataModal.style.display = "none";
            alert("参与者名单已保存！");
        }
    </script>

</body>

</html>