JavaScript九宫格随机抽奖示例

news2024/12/20 10:02:37 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>九宫格抽奖</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 抽奖容器样式 */
       .lottery-container {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid #ccc;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 5px;
            background-color: lightgray;
        }

        /* 每个格子的样式 */
       .lottery-item {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            background-color: cadetblue;
            color: white;
        }

        /* 抽奖按钮样式 */
       .lottery-button {
            width: 100px;
            height: 40px;
            margin: 20px auto;
            display: block;
            border: none;
            border-radius: 5px;
            background-color: navajowhite;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="lottery-container">
        <div class="lottery-item">奖品1</div>
        <div class="lottery-item">奖品2</div>
        <div class="lottery-item">奖品3</div>
        <div class="lottery-item">奖品4</div>
        <div class="lottery-item">奖品5</div>
        <div class="lottery-item">奖品6</div>
        <div class="lottery-item">奖品7</div>
        <div class="lottery-item">奖品8</div>
        <div class="lottery-item">奖品9</div>
    </div>
    <button class="lottery-button" id="lotteryButton">开始抽奖</button>
    <script>
        // 获取抽奖按钮元素
        const lotteryButton = document.getElementById('lotteryButton');
        // 获取所有的抽奖格子元素，返回的是一个类数组对象
        const lotteryItems = document.querySelectorAll('.lottery-item');

        // 用于记录当前选中的格子索引，初始化为0
        let currentIndex = 0;
        // 用于记录抽奖转动的圈数
        let roundCount = 0;
        // 随机生成的中奖格子索引
        let winningIndex;
        // 本次抽奖目标转动圈数，这里设置为5 - 10圈之间，可根据需求调整
        let targetRoundCount;
        // 定时器的引用，用于控制抽奖转动的间隔和停止
        let timer;

        // 点击抽奖按钮时触发的函数
        lotteryButton.addEventListener('click', function () {
            // 随机生成中奖格子的索引，范围是0到8（对应九宫格的9个格子）
            winningIndex = Math.floor(Math.random() * lotteryItems.length);
            // 随机生成目标转动圈数，范围在5 - 10圈
            targetRoundCount = Math.floor(Math.random() * 6 + 5);
            // 启动抽奖转动逻辑，通过定时器来控制
            startLottery();
        });

        // 启动抽奖转动的函数
        function startLottery() {
            // 设置定时器，每200毫秒执行一次rotateLottery函数，来模拟抽奖转动效果
            timer = setInterval(rotateLottery, 200);
        }

        // 模拟抽奖转动的函数，实现格子的随机变色切换效果
        function rotateLottery() {
            // 随机选择下一个要变色显示的格子索引（不按照顺序）
            let nextIndex;
            do {
                nextIndex = Math.floor(Math.random() * lotteryItems.length);
            } while (nextIndex === currentIndex);

            // 将当前选中的格子恢复默认颜色（cadetblue）
            lotteryItems[currentIndex].style.backgroundColor = 'cadetblue';
            // 更新当前选中的格子索引为新选择的索引
            currentIndex = nextIndex;
            // 将新选中的格子设置为高亮颜色（这里设置为黄色，可根据喜好调整）
            lotteryItems[currentIndex].style.backgroundColor = 'yellow';

            // 判断是否转完一圈，九宫格转完一圈即每个格子都经过一次选中
            if (currentIndex === 0) {
                roundCount++;
            }

            // 判断是否达到目标转动圈数
            if (roundCount >= targetRoundCount) {
                // 达到目标圈数后，清除定时器，停止抽奖转动
                clearInterval(timer);
                // 判断当前选中的格子是否为中奖格子
                if (currentIndex === winningIndex) {
                    // 如果是中奖格子，弹出提示框告知用户中奖信息
                    alert('🎉恭喜你，中奖的是：' + lotteryItems[currentIndex].innerHTML);
                }
                return;
            }
        }
    </script>
</body>

</html>

代码总结注释

  1. HTML 结构部分

    • 页面的 head 标签内定义了页面的标题、字符编码以及样式相关的 CSS。样式部分主要对抽奖容器（.lottery-container）、抽奖格子（.lottery-item）和抽奖按钮（.lottery-button）进行了样式设置，使得页面呈现出九宫格抽奖的基本外观，抽奖容器使用 grid 布局来均匀划分九宫格，每个格子设置了背景色、文字颜色等样式，抽奖按钮设置了大小、颜色、圆角等外观样式。
    • 在 body 标签内，首先创建了一个包含九个 div（代表九宫格的格子）的抽奖容器，每个格子里显示了不同的奖品名称（这里简单写为奖品 1 - 奖品 9，实际应用中可替换为真实奖品信息），然后添加了一个 id 为 lotteryButton 的按钮用于触发抽奖操作。

  2. JavaScript 代码部分

    • 变量声明与初始化：
      • 通过 document.getElementById 和 document.querySelectorAll 方法获取到抽奖按钮元素和所有抽奖格子元素，并分别存储在 lotteryButton 和 lotteryItems 变量中。
      • 声明了几个关键变量，currentIndex 用于记录当前选中的格子索引，初始值设为 0；roundCount 用于记录抽奖转动的圈数，初始值为 0；winningIndex 用来存储随机生成的中奖格子索引；targetRoundCount 用于设定本次抽奖目标转动的圈数，初始时会在 5 - 10 圈之间随机生成；timer 变量用于保存定时器的引用，方便后续控制定时器的启动、停止等操作。
    • 点击事件处理（lotteryButton.addEventListener('click', function () {...})）：
      • 当用户点击抽奖按钮时，首先会随机生成中奖格子的索引（通过 Math.floor(Math.random() * lotteryItems.length) 在 0 到格子总数减 1 的范围内生成一个随机整数），这个索引对应着九宫格中的某个格子，也就是中奖的目标格子。
      • 接着随机生成本次抽奖要转动的目标圈数（通过 Math.floor(Math.random() * 6 + 5) 生成一个 5 - 10 之间的随机整数作为圈数），然后调用 startLottery 函数启动抽奖转动逻辑，通过定时器来模拟抽奖过程中格子不断切换变色的效果。
    • 抽奖转动启动函数（startLottery）：
      • 此函数内部使用 setInterval 方法创建一个定时器，每隔 200 毫秒就会调用一次 rotateLottery 函数，以此来控制抽奖过程中格子的切换频率，实现类似转动的视觉效果，定时器的引用保存在 timer 变量中，方便后续对其进行操作。
    • 抽奖转动逻辑函数（rotateLottery）：
      • 首先通过一个 do-while 循环随机选择下一个要变色显示的格子索引（确保每次选择的索引与当前索引不同，实现随机切换效果），并将其赋值给 nextIndex 变量。
      • 接着将当前选中的格子（索引为 currentIndex）的背景颜色恢复为默认的 cadetblue（深蓝色），然后更新 currentIndex 为新选择的 nextIndex，并将新选中的格子背景色设置为高亮的 yellow（黄色），通过这种颜色切换来模拟抽奖转动时格子的闪烁效果。
      • 通过判断 currentIndex 是否等于 0 来确定是否转完一圈（因为九宫格是循环的，当回到第一个格子时可认为转完了一圈），如果等于 0，则将 roundCount（记录圈数的变量）自增 1。
      • 最后判断 roundCount 是否达到了之前随机生成的 targetRoundCount（目标转动圈数），如果达到了目标圈数，就使用 clearInterval 方法清除定时器，停止抽奖转动，然后判断当前选中的格子（索引为 currentIndex）是否与之前随机生成的中奖格子索引（winningIndex）相等，如果相等，则弹出提示框告知用户中奖信息，显示的内容是对应格子里的奖品名称（通过 lotteryItems[currentIndex].innerHTML 获取格子内的文本内容）。

总的来说，这段代码实现了一个简单的九宫格抽奖功能，通过随机选择格子、模拟转动圈数以及判断中奖等逻辑，让用户点击按钮后能参与抽奖并在满足条件时得知中奖结果，同时可以根据实际需求对抽奖的各项参数（如目标圈数范围、格子样式、奖品信息等）进行调整和扩展。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2262637.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

领域驱动设计的学习分享

领域驱动设计的学习分享

DDD 是什么 领域驱动设计(Domain Driven Design) 是一种从系统分析到软件建模的一套方法论。以领域为核心驱动力的设计体系。 为什么使用 面向对象设计&#xff0c;数据行为绑定&#xff0c;告别贫血模型优先考虑领域模型&#xff0c;而不是切割数据和行为准确传达业务规则…
阅读更多...
Three.js推荐-可以和Three.js结合的动画库

Three.js推荐-可以和Three.js结合的动画库

在 Three.js 中&#xff0c;3D 模型、相机、光照等对象的变换&#xff08;如位置、旋转、缩放&#xff09;通常需要通过动画进行控制&#xff0c;以实现更加生动和富有表现力的效果。然而&#xff0c;Three.js 本身并没有内置的强大动画管理系统&#xff0c;尽管可以通过关键帧…
阅读更多...
vue+springboot+cas配置及cookie传递问题

vue+springboot+cas配置及cookie传递问题

cookie的注意事项 前边的文章已经介绍过cookie的基本信息&#xff0c;这里再次说明一点&#xff1a;cookie是无法进行跨域传递的&#xff0c;很多时候cookie无法设置和传递都是因为跨域问题&#xff0c;ip/端口不一致。 主要就是&#xff1a;被设置cookie和要传递cookie的地址…
阅读更多...
Mac升级macOS 15 Sequoia后，无法ssh连接本地虚拟机

Mac升级macOS 15 Sequoia后，无法ssh连接本地虚拟机

现象 macOS 15后&#xff0c;无法ssh连接本地启动的虚拟机&#xff0c;提示错误&#xff1a; No route to host&#xff0c;也ping不通。包括UTM、Parallels Desktop这两个虚拟机软件。之前都是没问题的&#xff0c;通过一些简单排查&#xff0c;目前没发现什么问题。 在虚拟…
阅读更多...
使用 NVIDIA DALI 计算视频的光流

使用 NVIDIA DALI 计算视频的光流

引言 光流&#xff08;Optical Flow&#xff09;是计算机视觉中的一种技术&#xff0c;主要用于估计视频中连续帧之间的运动信息。它通过分析像素在时间维度上的移动来预测运动场&#xff0c;广泛应用于目标跟踪、动作识别、视频稳定等领域。 光流的计算传统上依赖 CPU 或 GP…
阅读更多...
c语言----顺序结构

c语言----顺序结构

顺序结构的基本概念 定义&#xff1a;顺序结构是C语言程序中最基本的结构&#xff0c;它按照语句的先后顺序依次执行。就像我们日常做事一样&#xff0c;一步一步地按照顺序来完成任务。在C语言程序中&#xff0c;从程序的第一条语句开始&#xff0c;逐句向下执行&#xff0c;…
阅读更多...
基于base32的兑换码算法（思路）

基于base32的兑换码算法（思路）

base32编码指的是基于32个可打印字符对任意字节数据进行编码&#xff1a;大写字母A-Z以及数字2-7。 兑换码要求:长度为10个字符 如果将这32个字符依次放到一个base数组中&#xff0c;那么最大的下标就是31。我们将要编码的任意字节数据按照五个bit为一组进行划分&#xff0c;…
阅读更多...
python学opencv|读取图像（十六）修改HSV图像HSV值

python学opencv|读取图像（十六）修改HSV图像HSV值

【1】引言 前序学习进程中&#xff0c;我们已经掌握了对HSV通道和BGR通道的拆分和合并&#xff0c;并通过自由组合的形式&#xff0c;获得了和初始图像完全不一样的新图像&#xff0c;相关文章可以参考下述链接&#xff1a; python学opencv|读取图像&#xff08;十四&#xf…
阅读更多...
用QT制作的倒计时软件

用QT制作的倒计时软件

一、pro代码 RC_ICONS countdown.ico 二、mainwindow.cpp代码 #include "mainwindow.h" #include "ui_mainwindow.h"#include <QDateTime> #include <QMessageBox> #include <QSettings>MainWindow::MainWindow(QWidget *parent): QM…
阅读更多...
VScode MAC按任意键关闭终端 想要访问桌面文件

VScode MAC按任意键关闭终端 想要访问桌面文件

说明 最近配置MAC上CPP的运行环境&#xff0c;在安装必要的CPP插件后&#xff0c;配置launch和task等json文件后&#xff0c;点击运行三角形&#xff0c;每次都会跳出main想要访问桌面上的文件。并且输出也是在调试控制台&#xff0c;非常逆天。 尝试 尝试1:尽管我尝试将ta…
阅读更多...
【一本通】线段

【一本通】线段

【一本通】线段 C语言代码Java代码C代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 数轴上有 n条线段&#xff0c;选取其中 k条线段使得这 k条线段两两没有重合部分&#xff0c;问最大的k为多少? 输入 输入文件segment.in的第一行为…
阅读更多...
学习日志024--opencv中处理轮廓的函数

学习日志024--opencv中处理轮廓的函数

目录 前言​​​​​​​ 一、 梯度处理的sobel算子函数 功能 参数 返回值 代码演示 二、梯度处理拉普拉斯算子 功能 参数 返回值 代码演示 三、Canny算子 功能 参数 返回值 代码演示 四、findContours函数与drawContours函数 功能 参数 返回值 代码演示 …
阅读更多...
关于分页的样式问题

关于分页的样式问题

在最近写网页的时候遇到了一个关于样式的问题&#xff0c;今天我来跟大家来说一下。像是分页中的颜色效果&#xff0c;斑马纹颜色要注意颜色不要过于深。 这种的颜色就有一点深看着很不舒服&#xff0c;应将当前的颜色改为淡一点的&#xff0c;也可以利用rgba调整透明度&#x…
阅读更多...
机器学习周报（12.9-12.15）

机器学习周报（12.9-12.15）

文章目录 摘要Abstract 1 Swin Transformer1.1 输入1.2 Patch Partition1.3 Linear Embedding1.4 Patch Merging1.5 Swin Transformer Block1.6 代码总结 摘要 本篇博客介绍了采用类似于卷积核的移动窗口进行图像特征提取的Swin Transformer网络模型&#xff0c;这是一种基于T…
阅读更多...
基于Spring Boot的校园车辆管理系统

基于Spring Boot的校园车辆管理系统

一、系统背景与意义 随着校园规模的不断扩大和车辆数量的增加&#xff0c;传统的车辆管理方式已经难以满足高效、准确管理车辆的需求。因此&#xff0c;开发一个基于Spring Boot的校园车辆管理系统具有重要的现实意义。该系统可以实现对校园车辆的信息化管理&#xff0c;提高车…
阅读更多...
SpringBoot3整合FastJSON2如何配置configureMessageConverters

SpringBoot3整合FastJSON2如何配置configureMessageConverters

在 Spring Boot 3 中整合 FastJSON 2 主要涉及到以下几个步骤&#xff0c;包括添加依赖、配置 FastJSON 作为 JSON 处理器等。下面是详细的步骤&#xff1a; 1. 添加依赖 首先&#xff0c;你需要在你的 pom.xml 文件中添加 FastJSON 2 的依赖。以下是 Maven 依赖的示例&#…
阅读更多...
隐私清理工具Goversoft Privazer

隐私清理工具Goversoft Privazer

PrivaZer 是一款专为隐私保护而生的 Windows 系统清理工具&#xff0c;支持深度扫描、清除无用文件和隐私痕迹。 PrivaZer - 深度扫描磁盘&#xff0c;自动清理上网痕迹&#xff0c;全面保护 Windows 的网络隐私 释放磁盘空间 硬盘空间告急&#xff0c;想清理却又无从下手&…
阅读更多...
UDP网络编程套接

UDP网络编程套接

目录 本文核心 预备知识 1.端口号 认识TCP协议 认识UDP协议 网络字节序 socket编程接口 sockaddr结构 UDP套接字编程 服务端 客户端 TCP与UDP传输的区别 可靠性&#xff1a; 传输方式&#xff1a; 用途&#xff1a; 头部开销&#xff1a; 速度&#xff1a; li…
阅读更多...
3.zabbix中文设置

3.zabbix中文设置

1、zabbix中文设置 2、中文乱码的原因 zabbix使用DejaVuSan.ttf字体&#xff0c;不支持中文&#xff0c;导致中文出现乱码。解决方法很简单&#xff0c;把我们电脑里面字体文件传到zabbix服务器上。 3、解决zabbix乱码方法 3.1、从Window服务器找到相应的字休复制到zabbix S…
阅读更多...
【Vue3学习】setup语法糖中的ref,reactive,toRef,toRefs

【Vue3学习】setup语法糖中的ref,reactive,toRef,toRefs

在 Vue 3 的组合式 API&#xff08;Composition API&#xff09;中&#xff0c;ref、reactive、toRef 和 toRefs 是四个非常重要的工具函数&#xff0c;用于创建和管理响应式数据。 一、ref 用ref()包裹数据,返回的响应式引用对象&#xff0c;包含一个 .value 属性&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023