js实现实现九宫格乱序抽奖

我们以前写的九宫格抽奖,都是顺时针按照顺序进行旋转抽奖,今天给大家分享一下乱序,就是不按照一定顺序的。

  • 用户的具体步骤:用户点击开始抽奖时,奖项开始随机闪,闪到一定次数后停止并且进行抽奖成功提示;
  • 这个闪到一定的次数,次数是随机的;就是当我们点击按钮时生成一个随机数(就相当于是次数范围我随便设置的50~100);
  • 当点击按钮时奖品已经开始闪,就需要设置定时器,定时器每隔200毫秒执行一次,每次执行生成一个范围在奖品数量之内的数字当下标,然后让对应奖品的颜色切换一下
  • 另外再声明一个变量为0,每次闪动加1,当这个值等于或者大于生成的50-100之间的随机数时抽奖结束并进行奖品内容提示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选夫九宫格抽奖2</title><script src="js/jquery-3.7.1.min.js"></script><style>* {margin: 0;padding: 0;}h1 {text-align: center;font-family: 宋体;}.box {font-family: 宋体;width: 340px;height: 340px;text-align: center;line-height: 100px;background-color: cornflowerblue;position: absolute;margin: 5% 40%;}.div1 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 10px;left: 10px;}.div2 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 10px;left: 120px;}.div3 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 10px;left: 230px;}.div4 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 120px;left: 230px;}.div5 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 230px;left: 230px;}.div6 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 230px;left: 120px;}.div7 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 230px;left: 10px;}.div8 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 120px;left: 10px;}#but {font-family: 宋体;width: 30%;height: 30%;top: 120px;left: 1px;background-color: deepskyblue;position: relative;}</style></head><body><h1>九宫格抽奖</h1><div class="box"><div class="div1">和张晚意吃饭</div><div class="div2">和成毅吃饭</div><div class="div3">和檀健次吃饭</div><div class="div4">和王星越吃饭</div><div class="div5">和李现吃饭</div><div class="div6">和魏大勋吃饭</div><div class="div7">和邓为吃饭</div><div class="div8">和林更新吃饭</div><button id="but">开始抽奖</button></div><script>// 获取按钮let button = document.getElementById('but');// 获取最大的divlet box = document.getElementsByClassName('box')[0];console.log(box);// 获取box里的div标签let award = box.getElementsByTagName('div');console.log(award);// 创建全局变量k初始化为0let k = 0;// 闪动的次数初始值let count = 0;// 定时器let int;let num;// 创建全局变量时间time的初始值为500.let time = 100;button.onclick = but;// 点击按钮时会触发的事件function but() {setTimeout(one, time);// 向上取整随机数 取值50~100num = Math.floor(Math.random() * 51) + 50;// 点击按钮的时候为空button.onclick = null;}// 定时器function one() {for (let i = 0; i < award.length; i++) {award[i].style.backgroundColor = 'aqua';}k = Math.floor(Math.random() * award.length);console.log(k);award[k].style.backgroundColor = '#81b5f8';// 闪动的次数加一count++;// 判断闪动的次数大于等于50~100的这个区间时if (count >= num) {// 清除永久性定时器并执行一次性定时器的弹窗clearInterval(int);count = 0;time = 100;button.onclick = but;// 获取div下标的内容let text = award[k].innerHTML;// 使用一次性定时器执行抽奖过后的弹窗setTimeout(function() {alert('恭喜您荣获' + '"' + text + '"' + "的机会!");}, 300);} else {// 否则清除永久定时器,继续执行intclearInterval(int);int = setInterval(one, time);}}</script></body>
</html>

注意:最重要的是奖项背景颜色的设置!我在这里卡了很久!应该在定时器内每执行一次循环一次奖项的长度然后设置奖项的默认背景颜色;再通过随机数设置奖项抽中的颜色;我在这里执行顺序一直没弄明白!不过现在明白了!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是DMZ?路由器上如何使用DMZ?

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 DMZ 📒🚀 DMZ的应用场景💡 路由器设置DMZ🎈 注意事项 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 在网络管理中,DMZ(Demilitarized Zone,隔离区)是一个特殊的网络区域,常用于将公共访问和内部网络隔离开来。DMZ功能允许…

vue面试题汇总之响应式理解

进行代理(解决第一步读写数据调用函数) vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理 Proxy的性能会比Object.defineProperty好很多 Object.defineProperty是一次性代理完所有的数据,如果对象嵌套很深就会一直递归直到代理完所有属…

遇到JSON文件就头大?掌握Python这几种方法,让你轻松应对

目录 1、标准库json模块 📄 1.1 json.load()函数介绍 1.2 json.loads()处理字符串 1.3 使用json.dump()写入JSON 1.4 json.dumps()美化输出 1.4 错误处理与编码问题 1.5 高效读取大文件技巧 2、第三方库simplejson加持 🔧 2.1 安装与导入simplejson 2.2 性能优势与…

A.计算圆周率——无穷级数法

描述 圆周率π可以用无穷级数表示&#xff1a; 左边的展式是一个无穷级数&#xff0c;被称为莱布尼茨级数&#xff08;Leibniz&#xff09;&#xff0c;这个级数收敛到π/4&#xff0c;它通常也被称为格雷戈里-莱布尼茨级数&#xff0c;用以纪念莱布尼茨同时代的天文学家兼数…

解决css文本内容为符号不会换行问题

错误样式如上&#xff0c;超出了规定的文本区域。 在css上增加word-wrap: break-word;即可。

电商价格监测对于品牌渠道管控的重要性

当品牌开启经销渠道或涉足电商渠道时&#xff0c;必须着手进行线上线下价格监测。只有监控到电商价格&#xff0c;才能明晰出货后的商品历经多轮市场演绎后的实际价格&#xff0c;进而了解市场需求下的真实低价行为。借助力维网络开发的电商价格监测系统&#xff0c;品牌商能知…

uni-app利用renderjs实现安卓App上jssip+freeswitch+webrtc音视频通话功能

效果图 前置知识 利用renderjs在app端加载for web库 JsSIPFreeSwitchVue实现WebRtc音视频通话 原始模块 <template><viewclass"test-sip":userExtension"userExtension":change:userExtension"JsSIP.handleUserExtenSionChange":tar…

Python邮箱发送如何设置?Python发信方法?

Python邮箱发送邮件需要哪些库&#xff1f;怎么使用Python发信&#xff1f; Python的强大之处在于其丰富的库和模块&#xff0c;使得开发者可以轻松地实现各种功能&#xff0c;包括通过电子邮件发送信息。AokSend将介绍如何在Python中设置和发送电子邮件&#xff0c;以及相关的…

超高频载码体有哪些特点?

载码体由线圈、已编程的芯片&#xff0c;以及电池(在有源读写系统中)组成&#xff0c;具有唯一的电子编码&#xff0c;拥有大容量的存储空间&#xff0c;通常附着于产品载体乃至是产品本身&#xff0c;成为一个随产品移动的移动数据库&#xff0c;可以帮助企业更好的物料、成品…

JAVA2 简单运算 题目

题目 JAVA2 简单运算分析&#xff1a;代码&#xff1a;大佬代码&#xff1a; JAVA2 简单运算 描述 输入两个正整数a和b&#xff0c;输出这两个正整数的和&#xff0c;差&#xff0c;积&#xff0c;商&#xff0c;模&#xff08;若a>b则输出a-b&#xff0c;a/b&#xff0c;a%…

AH8652:220V转5V非隔离电源芯片

### AH8652&#xff1a;220V转5V非隔离电源芯片&#xff0c;高效转换新选择 #### 引言 随着电子设备对电源稳定性和安全性要求的提高&#xff0c;非隔离电源转换芯片因其简单、高效和成本效益而受到市场的欢迎。AH8652是一款专为220V转5V设计的非隔离电源芯片&#xff0c;以其…

Ubuntu安装Protobuf

以前的版本中&#xff0c;有./configure&#xff0c;所以参照下面的博客链接 Ubuntu安装Protobuf&#xff0c;指定版本_ubuntu更新protobuf-CSDN博客 后来的版本中&#xff0c;没有了./configure文件&#xff0c;需要安装bazel,参照下面的官网链接 protobuf/src/README.md a…

nvidia 显卡 没有正确安装或配置 OpenGL 库

看到这个错误可能意味着你的系统没有正确安装或配置 OpenGL 库。以下是一些步骤来解决这个问题&#xff1a; 1. 安装必要的软件包 确保你已经安装了必要的软件包&#xff0c;包括 mesa-utils 和 nvidia-driver。 安装 mesa-utils sudo apt update sudo apt install mesa-ut…

python替换word文件中的图片

python替换word文件中的图片 模拟鼠标键盘&#xff0c;截屏 import glob import os import timeimport pyautogui import pyautogui as p from PIL import ImageGrab from pynput.keyboard import Controller# -*- coding:utf-8 -*-directory ./directory1 ./outputfor f i…

基于 Redis 实现分布式缓存

一、单节点 Redis 的问题 1.1 存在的问题 1、数据丢失问题&#xff1a;Redis 是内存存储&#xff0c;服务重启可能会丢失数据。 2、并发能力问题&#xff1a;单节点 Redis 并发能力虽然不错&#xff0c;但也无法满足如 618 这样的高并发场景。 3、故障恢复问题&#xff1a;如果…

实践分享:鸿蒙跨平台开发实例

先来理解什么是跨平台 提到跨平台&#xff0c;要先理解什么是“平台”&#xff0c;这里的平台&#xff0c;就是指应用程序的运行环境&#xff0c;例如操作系统&#xff0c;或者是Web浏览器&#xff0c;具体的像HarmonyOS、Android、iOS、或者浏览器&#xff0c;都可以叫做平台…

用于云医疗图像的缩略图保持加密方案

论文标题&#xff1a;《Data hiding with thumbnail-preserving encryption for cloud medical images》&#xff0c;作者提出了一种用于云医疗图像的可逆数据隐藏方案&#xff0c;同时保留了缩略图。下面是论文的创新点和算法过程的总结。 一、缩略图保持加密与传统图像加密 …

GD32 MCU超频后无法再次下载程序的解决办法

我们知道&#xff0c;MCU的系统时钟主频就相当于人的心跳或脉搏&#xff0c;为所有的工作单元提供时间基数&#xff0c;所以一般在程序最开始的地方都需要进行主频配置。 GD32固件库中提供了多种宏定义&#xff0c;可以很方便的将系统时钟配置为想要的频率。 GD32固件库中所用…

AI宣传文案软件有哪些?5款AI软件推荐

AI宣传文案软件有哪些&#xff1f;AI宣传文案软件在现代营销和创意产业中扮演着越来越重要的角色&#xff0c;它们凭借先进的自然语言处理、机器学习和深度学习技术&#xff0c;不仅解放了创作者的双手&#xff0c;还大大提升了文案的生成效率和质量。这些软件能够精准捕捉用户…

【JAVA开发笔记】Java判断集合中的对象的字段是否存在或等于某值

在Java中&#xff0c;判断一个List对象中某个字段是否等于某个值&#xff0c;通常需要对List进行遍历&#xff0c;并对每个对象检查其字段的值。以下是一个简单的例子&#xff0c;假设我们有一个Person类&#xff0c;它有一个name字段&#xff0c;我们想要判断List中是否有某个…