九宫格转盘抽奖九宫格转盘抽奖,九宫格转盘抽奖,九宫格转盘抽奖,九宫格转盘抽奖,九宫格转盘抽奖,九宫格转盘抽奖,九宫格转盘

<!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 rel="stylesheet" href="css/roulette.css">
</head>
<body>
    <div class="roulette-container">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
        <div class="cell">4</div>
        <button id="spinBtn" class="cell">开始</button>
        <div class="cell">6</div>
        <div class="cell">7</div>
        <div class="cell">8</div>
        <div class="cell">9</div>
    </div>
    <div id="result"></div>
    <script src="js/roulette.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', () => {
    const cells = document.querySelectorAll('.cell');
    const spinBtn = document.getElementById('spinBtn');
    const resultDisplay = document.getElementById('result');
    const fastScrollingTime = 100; // 快速高亮动画时间
    const roundsNumber = 4; // 转动轮数

    let isSpinning = false;
    let intervalId = null;

    // 顺时针顺序 [0,1,2,5,8,7,6,3]
    const clockwiseOrder = [0, 1, 2, 5, 8, 7, 6, 3];

    function highlightCell(index) {
        cells.forEach(cell => cell.classList.remove('active'));
        if (index >= 0 && index < cells.length) {
            cells[index].classList.add('active');
        }
    }

    spinBtn.addEventListener('click', () => {
        if (isSpinning) return;

        isSpinning = true;
        let step = 0;
        const stopIndex = Math.floor(Math.random() * 8);

        // 快速高亮动画
        intervalId = setInterval(() => {
            highlightCell(clockwiseOrder[step]);
            step = (step + 1) % 8;
        }, fastScrollingTime);

        // 2秒后开始减速
        setTimeout(() => {
            clearInterval(intervalId);

            let finalStep = stopIndex;
            let steps = 0;
            let delay = 100;

            // 减速动画
            const slowInterval = setInterval(() => {
                highlightCell(clockwiseOrder[finalStep]);
                finalStep = (finalStep + 1) % 8;

                if (steps++ >= 8) {
                    clearInterval(slowInterval);
                    isSpinning = false;
                    resultDisplay.textContent = `中奖号码：${clockwiseOrder[stopIndex] + 1}`;
                }

                delay += 20;
            }, delay);
        }, (fastScrollingTime * (8 * roundsNumber + 1)) + ((stopIndex - 1) * 100));
    });
});

/* 全局样式 */
body {
    font-family: 'Arial', sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 20px;
}

/* 九宫格容器样式 */
.roulette-container {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    grid-template-rows: repeat(3, 120px);
    gap: 15px;
    width: 390px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 格子基础样式 */
.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    font-size: 28px;
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 中间按钮样式 */
#spinBtn {
    grid-area: 2 / 2;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    z-index: 10;
    font-size: 22px;
}

/* 激活状态样式 */
.cell.active {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    transform: scale(1.1);
    box-shadow: 0 0 20px #f1c40f;
    animation: pulse 0.5s infinite alternate;
}

/* 结果显示样式 */
#result {
    text-align: center;
    margin-top: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}

/* 动画效果 */
@keyframes pulse {
    from { box-shadow: 0 0 10px #f1c40f; }
    to { box-shadow: 0 0 25px #f1c40f; }
}