deepseek自动生成的html九宫格抽奖页面- 编程源码 -卓越飞翔博客

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            margin: 20px;
        }
 
        .cell {
            background: white;
            border: 2px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
 
        #start {
            background: red;
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }
 
        .highlight {
            background: yellow !important;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="cell" data-id="1">一等奖</div>
        <div class="cell" data-id="2">参与奖</div>
        <div class="cell" data-id="3">三等奖</div>
        <div class="cell" data-id="4">谢谢参与</div>
        <button id="start">开始</button>
        <div class="cell" data-id="6">一等奖</div>
        <div class="cell" data-id="7">参与奖</div>
        <div class="cell" data-id="8">二等奖</div>
        <div class="cell" data-id="9">一等奖</div>
    </div>
 
    <script>
        const prizes = {
            '一等奖': { probability: 3, grids: [1, 6, 9] },
            '二等奖': { probability: 2, grids: [8] },
            '三等奖': { probability: 1, grids: [3] },
            '参与奖': { probability: 20, grids: [2, 7] },
            '谢谢参与': { probability: 74, grids: [4] }
        };
 
        const order = [1, 2, 3, 6, 9, 8, 7, 4]; // 顺时针移动顺序
        let isRunning = false;
        let currentIndex = 0;
        let timer = null;
        const baseSpeed = 100;
 
        document.getElementById('start').addEventListener('click', startLottery);
 
        function getRandomPrize() {
            let random = Math.random() * 100;
            let cumulative = 0;
            for (const [name, config] of Object.entries(prizes)) {
                cumulative += config.probability;
                if (random <= cumulative) {
                    const randomGrid = config.grids[Math.floor(Math.random() * config.grids.length)];
                    return { name, grid: randomGrid };
                }
            }
        }
 
        function updateHighlight() {
            document.querySelectorAll('.cell').forEach(cell => {
                cell.classList.remove('highlight');
            });
            const currentGrid = order[currentIndex];
            document.querySelector(`.cell[data-id="${currentGrid}"]`).classList.add('highlight');
        }
 
        function startLottery() {
            if (isRunning) {
                // 停止抽奖
                isRunning = false;
                clearInterval(timer);
                 
                const result = getRandomPrize();
                const targetIndex = order.indexOf(result.grid);
                 
                // 计算需要移动的步数（转2圈+到达目标）
                const laps = 2;
                const stepsToTarget = (targetIndex - currentIndex + order.length) % order.length;
                const totalSteps = laps * order.length + stepsToTarget;
                 
                let stepsMoved = 0;
                timer = setInterval(() => {
                    currentIndex = (currentIndex + 1) % order.length;
                    updateHighlight();
                    if (++stepsMoved >= totalSteps) {
                        clearInterval(timer);
                        setTimeout(() => alert(`恭喜获得：${result.name}`), 100);
                    }
                }, baseSpeed);
            } else {
                // 开始抽奖
                isRunning = true;
                timer = setInterval(() => {
                    currentIndex = (currentIndex + 1) % order.length;
                    updateHighlight();
                }, baseSpeed);
            }
        }
    </script>
</body>
</html>
相关推荐
