9宫格抽奖简单实现在这篇文章中，我们将介绍如何用 HTML、CSS 和 JavaScript 创建一个简单的 9宫格抽奖

在这篇文章中，我们将介绍如何用 HTML、CSS 和 JavaScript 创建一个简单的 9宫格抽奖。这个抽奖程序能够模拟一个转盘效果，通过点击“开始”按钮，格子会随机转动，最终停在一个随机的格子上，模拟抽奖的效果。

1. 项目概述

我们将实现一个 3x3 的九宫格，点击中心格子后，它会开始旋转，依次随机地选择格子，最后在某个格子上停止并显示抽奖结果。通过使用 JavaScript，我们能够控制格子的动态变化和随机选择。

2. 项目需求

创建一个包含 9 个格子的 3x3 容器。
中心格子是点击按钮，触发抽奖的动作。
通过随机算法决定每次转动的格子。
动画效果：转动时逐渐加速后再减速，最后停在一个格子上。

3. HTML 结构

HTML 部分，我们使用一个 div 元素容器来承载九宫格，并为每个格子创建 div 元素。同时，我们还将添加一个“开始抽奖”按钮，点击后触发抽奖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9宫格抽奖</title>
    <style>
        .container {
            margin: 100px auto;
            width: 156px;
            height: 150px;
            display: flex;
            justify-content: start;
            flex-wrap: wrap;
        }

        .item {
            box-sizing: content-box;
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }
        .item.active {
            border-color: aqua;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

4. CSS 样式

为了实现九宫格布局，我们使用 flexbox 布局来容纳 9 个格子。每个格子有相同的大小，并且通过 border 来突出显示。

.container {
    margin: 100px auto;
    width: 156px;
    height: 150px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.item {
    box-sizing: content-box;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

.item.active {
    border-color: aqua; /* 激活时格子的边框颜色 */
}

5. JavaScript 实现

我们将主要的逻辑实现放在 JS 中。点击“开始抽奖”按钮后，格子将开始随机旋转，并最终停在一个格子上。具体过程包括：

初始化状态：设置中心格子为“开始”。
随机选择格子：每次更新时随机选择下一个格子，排除当前激活的格子和中间格子。
动画控制：通过 setInterval 实现逐渐加速和减速的动画效果。

let divs = document.querySelectorAll('.item');
const doms = {
    divs
};

const center = Math.floor(divs.length / 2); // 中间格子
doms.divs[center].textContent = '开始'; // 设置中心格子为“开始”
doms.divs[center].style.cursor = 'pointer';
doms.divs[center].style.textAlign = 'center';
doms.divs[center].style.lineHeight = doms.divs[center].getBoundingClientRect().height + 'px';

let activeIndex = center; // 初始激活格子为中心格子
let isRunning = false; // 是否在运行
let speed = 30; // 控制转动的速度

// 随机生成一个不等于当前格子且不等于中间格子的

索引的函数。

function getRandomIndex(currentIndex, totalItems, excludeIndex) {
    let randomIndex;
    do {
        randomIndex = Math.floor(Math.random() * totalItems);
    } while (randomIndex === currentIndex || randomIndex === excludeIndex); // 确保不选择当前激活的格子和中间格子
    return randomIndex;
}

6. 测试抽奖功能

当点击中间格子时，抽奖将开始。我们监听中间格子的点击事件，如果当前抽奖没有运行（即 isRunning 为 false），我们将启动一个随机旋转的过程。

doms.divs[center].addEventListener('click', function() {
    if (isRunning) return; // 如果抽奖已经在运行，则不再触发
    isRunning = true; // 标记抽奖正在运行
    let counter = 0;
    let interval;

    // 旋转动画函数
    function rotate() {
        // 移除当前格子的 active 类
        divs[activeIndex].classList.remove('active');

        // 随机选择下一个格子（排除当前格子和中间格子）
        activeIndex = getRandomIndex(activeIndex, divs.length, center);

        // 给下一个格子添加 active 类
        divs[activeIndex].classList.add('active');

        counter++;

        // 每转动一定次数后，减慢速度
        if (counter >= 10) {
            clearInterval(interval); // 停止转动
            setTimeout(() => {
                alert('抽奖结果：' + (activeIndex + 1)); // 显示抽奖结果
                isRunning = false; // 允许下一次点击
            }, 500); // 显示结果后延迟 500 毫秒
        }
    }

    // 初始速度较快，逐渐减慢
    interval = setInterval(rotate, 100 - (counter / speed)); // 控制速度
});

7. 工作原理

随机选择格子：每次点击中间的“开始”格子后，调用 getRandomIndex 来随机选择下一个格子。该函数确保不会选择当前格子或中间的格子。
加速和减速效果：我们使用 setInterval 来控制每次格子的变化频率。随着计数器的增加，间隔时间逐渐变大，从而产生逐渐减速的效果。
停止和显示结果：当转动的次数达到一定值时（例如 10 次），停止转动并显示结果。结果会显示在一个弹窗中，并标明是哪一个格子被选中。

8. 总结

至此，我们成功实现了一个 9宫格抽奖程序，使用了 HTML、CSS 和 JavaScript 来构建交互效果。关键技术点包括：

使用 flexbox 布局实现九宫格；
使用 setInterval 控制转动的动画效果；
使用 随机算法 确保每次转动都是随机的；
加速与减速 效果让抽奖过程更具悬念。