踩楼抽奖单页工具-灵锡网

演示图

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(to right, #e0f7fa, #ffebee); /* 渐变背景 */
            color: #333;
            line-height: 1.6;
            padding: 40px;
            max-width: 600px;
            margin: auto;
            border-radius: 12px;
            margin-top: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: #444;
            text-align: center;
        }

        h3 {
            font-size: 1.5em;
            margin: 15px 0;
            color: #555;
        }

        .prize-input, .floor-input {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            border-radius: 8px;
            background-color: #ffffff;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .prize-input input, .floor-input input {
            flex: 1;
            padding: 12px;
            margin-right: 10px;
            border: 2px solid #007aff; /* 加粗边框 */
            border-radius: 4px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .prize-input input:focus, .floor-input input:focus {
            border-color: #0056b3; /* 深蓝色聚焦效果 */
            outline: none;
        }

        .prize-input button, #drawButton {
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 15px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .prize-input button:hover, #drawButton:hover {
            background-color: #0056b3;
        }

        .result {
            margin-top: 20px;
            font-weight: bold;
            color: #27ae60;
            background-color: #ecf0f1;
            padding: 15px;
            border-radius: 4px;
            text-align: center;
            border: 1px solid #27ae60; /* 绿色边框 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: none; /* 默认隐藏结果区域 */
        }

        @media (max-width: 600px) {
            body {
                padding: 20px;
            }
            h1 {
                font-size: 2em;
            }
            h3 {
                font-size: 1.2em;
            }
            .prize-input, .floor-input {
                flex-direction: column;
            }
            .prize-input input, .floor-input input {
                margin-right: 0;
                margin-bottom: 10px;
                width: 100%; /* 宽度100% */
            }
            .prize-input button {
                width: 100%; /* 按钮宽度100% */
            }
        }
    </style>
</head>
<body>
    <div class="prize-list">
        <h1>抽奖</h1>
        <h3>输入奖品</h3>
        <div id="prizeInputs">
            <div class="prize-input">
                <input type="text" placeholder="奖品名称" required>
                <input type="number" placeholder="数量" min="1" required>
            </div>
        </div>
        <button id="addPrizeButton">添加奖品</button>
    </div>
<h3>参与楼层</h3>
    <div class="floor-input">
        
        <input type="number" id="floorCount" placeholder="输入楼层数量" min="1" required>
    </div>

    <button id="drawButton">抽奖</button>
    <div class="result" id="result"></div> <!-- 默认隐藏 -->

    <script>
        const addPrizeButton = document.getElementById('addPrizeButton');
        const drawButton = document.getElementById('drawButton');
        const prizeInputs = document.getElementById('prizeInputs');
        const floorCountInput = document.getElementById('floorCount');
        const resultDiv = document.getElementById('result');

        // 添加奖品输入框
        addPrizeButton.addEventListener('click', () => {
            const newPrizeInput = document.createElement('div');
            newPrizeInput.classList.add('prize-input');
            newPrizeInput.innerHTML = `
                <input type="text" placeholder="奖品名称" required>
                <input type="number" placeholder="数量" min="1" required>
                <button class="deletePrizeButton">删除</button>
            `;
            prizeInputs.appendChild(newPrizeInput);

            // 为删除按钮添加事件
            newPrizeInput.querySelector('.deletePrizeButton').addEventListener('click', () => {
                prizeInputs.removeChild(newPrizeInput);
            });
        });

        // 抽奖
        drawButton.addEventListener('click', () => {
            const prizeEntries = prizeInputs.getElementsByClassName('prize-input');
            const floorCount = parseInt(floorCountInput.value);
            const winners = [];
            const totalPrizes = Array.from(prizeEntries).reduce((total, entry) => {
                const quantity = parseInt(entry.children[1].value);
                return total + (isNaN(quantity) ? 0 : quantity);
            }, 0);

            // 验证参与楼层数量是否大于奖品数量
            if (floorCount <= totalPrizes) {
                alert("参与楼层数量必须大于奖品数量。");
                return;
            }

            // 验证楼层数量是否为数字
            if (isNaN(floorCount) || floorCount < 1) {
                alert("参与楼层数量必须为正整数。");
                return;
            }

            // 抽奖逻辑
            const usedFloors = new Set(); // 用于存储已中奖的楼层

            for (let entry of prizeEntries) {
                const prizeName = entry.children[0].value;
                const prizeQuantity = parseInt(entry.children[1].value);
                
                for (let i = 0; i < prizeQuantity; i++) {
                    let winnerFloor;
                    do {
                        winnerFloor = Math.floor(Math.random() * floorCount) + 1; // 随机生成楼层
                    } while (usedFloors.has(winnerFloor)); // 确保楼层不重复中奖
                    usedFloors.add(winnerFloor);
                    winners.push(`奖品: ${prizeName}, 楼层: ${winnerFloor}`);
                }
            }

            resultDiv.innerHTML = winners.length > 0 ? winners.join('<br>') : '没有中奖';
            resultDiv.style.display = 'block'; // 显示结果区域
        });
    </script>
</body>
</html>