JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统，JS做出随机抽奖系统的注意事项有哪些，下面就是实战案例，一起来看一下。
用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。
功能：
- 点开始按钮开始抽奖，随机出现奖品名称；
- 点停止按钮即可停止抽奖；
- 按下回车键可切换开始抽奖和停止抽奖。
效果
html代码：
创建html结构，最基础的要含有显示的奖品名称和开始、停止按钮。
<!doctype html> <html> <head> <title>抽奖系统</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <p id="title" class="title">开始抽奖啦！</p> <p class="btns"> <span id="play">开 始</span> <span id="stop">停 止</span> </p> </body> </html>
js主要代码片段：
首先，定义data数组，写入各奖品名称。并初始化timer定时器，和键盘事件状态flag(一开始状态为0，按下键盘变成1，再按键盘变成0，如此切换).
var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null, flag = 0;
定义开始抽奖函数playFun();
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
//每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
clearInterval(timer);
//定时器50毫秒触发一次
timer = setInterval(function(){
//获取奖品下标随机数
var random = Math.floor(Math.random() * data.length);
//显示随机的奖品名称
title.innerHTML = data[random];
}, 50);
//改变将开始按钮背景色
play.style.background = '#666';
}定义停止抽奖函数stopFun();
function stopFun(){
//清除定时器即可结束抽奖
clearInterval(timer);
var play = document.getElementById('play');
//改变将停止按钮背景色
play.style.background = '#036';
}按回车键切换抽奖状态事件；
document.onkeyup = function(event){
event = event || window.event;
//回车键键码为13
if (event.keyCode == 13) {
//如果状态flag值为0则开始抽奖，并把状态值改为1，否则停止抽奖并把状态值改为0
if (flag == 0){
playFun();
flag = 1;
}else{
stopFun();
flag = 0;
}
}
}js完整代码：
var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'],
timer = null, //定时器
flag = 0; //用于键盘事件状态标记
window.onload = function() {
var play = document.getElementById('play'),
stop = document.getElementById('stop');
// 开始抽奖
play.onclick = playFun;
stop.onclick = stopFun;
// 键盘事件
document.onkeyup = function(event) {
event = event || window.event;
if (event.keyCode == 13) {
if (flag == 0) {
playFun();
flag = 1;
} else {
stopFun();
flag = 0;
}
}
}
}
// 开始抽奖
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
//每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
clearInterval(timer);
timer = setInterval(function() {
var random = Math.floor(Math.random() * data.length);
title.innerHTML = data[random];
}, 50);
play.style.background = '#999';
}
//停止抽奖
function stopFun() {
clearInterval(timer);
var play = document.getElementById('play');
play.style.background = '#036';
}css样式：
* {
margin: 0;
padding: 0;
}
.title {
font-size: 24px;
font-weight: bold;
width: 400px;
height: 70px;
margin: 0 auto;
padding-top: 30px;
text-align: center;
color: #f00;
}
.btns {
width: 190px;
height: 30px;
margin: 0 auto;
}
.btns span {
font-family: '微软雅黑';
font-size: 14px;
line-height: 27px;
display: block;
float: left;
width: 80px;
height: 27px;
margin-right: 10px;
cursor: pointer;
text-align: center;
color: #fff;
border: 1px solid #eee;
border-radius: 7px;
background: #036;
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是JS做出随机抽奖系统的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
CUDA之通用矩阵乘法：从入门到熟练！
Mar 25, 2024 pm 12:30 PM
通用矩阵乘法（GeneralMatrixMultiplication，GEMM）是许多应用程序和算法中至关重要的一部分，也是评估计算机硬件性能的重要指标之一。通过深入研究和优化GEMM的实现，可以帮助我们更好地理解高性能计算以及软硬件系统之间的关系。在计算机科学中，对GEMM进行有效的优化可以提高计算速度并节省资源，这对于提高计算机系统的整体性能至关重要。深入了解GEMM的工作原理和优化方法，有助于我们更好地利用现代计算硬件的潜力，并为各种复杂计算任务提供更高效的解决方案。通过对GEMM性能的优
华为干昆 ADS3.0 智驾系统 8 月上市 享界 S9 首发搭载
Jul 30, 2024 pm 02:17 PM
7月29日，在AITO问界第四十万台新车下线仪式上，华为常务董事、终端BG董事长、智能汽车解决方案BU董事长余承东出席发表演讲并宣布，问界系列车型将于今年8月迎来华为干昆ADS3.0版本的上市，并计划在8月至9月间陆续推送升级。 8月6日即将发布的享界S9将首发华为ADS3.0智能驾驶系统。华为干昆ADS3.0版本在激光雷达的辅助下，将大幅提升智驾能力，具备融合端到端的能力，并采用GOD(通用障碍物识别)/PDP(预测决策规控)全新端到端架构，提供车位到车位智驾领航NCA功能，并升级CAS3.0全
苹果16系统哪个版本最好
Mar 08, 2024 pm 05:16 PM
苹果16系统中版本最好的是iOS16.1.4，iOS16系统的最佳版本可能因人而异添加和日常使用体验的提升也受到了很多用户的好评。苹果16系统哪个版本最好答：iOS16.1.4iOS16系统的最佳版本可能因人而异。根据公开的消息，2022年推出的iOS16被认为是一个非常稳定且性能优越的版本，用户对其整体体验也相当满意。此外，iOS16中新功能的添加和日常使用体验的提升也受到了很多用户的好评。特别是在更新后的电池续航能力、信号表现和发热控制方面，用户的反馈都比较积极。然而，考虑到iPhone14
excel抽奖小程序如何制作
Mar 20, 2024 am 11:40 AM
平时的工作中会遇到很多需要抽签进行的内容，传统的方法还是用纸质的号码随机抽号，随着电子软件的发展，我们可以用电脑制作抽签，今天欠们给大家分享的课程是excel抽奖小程序如何制作。1、首先我们打开Excel软件，打开我们准备好的表格，表格中要包含我们人的名字。 2、接着我们对右边的单元格进行合并，将今晚谁幸运填充为黑色，并将下方的单元格合并填充为红色，如下图所示。 3、接着我们在红色区域中输入randbetween函数，设置第一行为2，最后一行为7，如下图所示。 4、接着我们在前面输入ind
常用常新！华为Mate60系列升级HarmonyOS 4.2：AI云增强、小艺方言太好用了
Jun 02, 2024 pm 02:58 PM
4月11日，华为官方首次宣布HarmonyOS4.2百机升级计划，此次共有180余款设备参与升级，品类覆盖手机、平板、手表、耳机、智慧屏等设备。过去一个月，随着HarmonyOS4.2百机升级计划的稳步推进，包括华为Pocket2、华为MateX5系列、nova12系列、华为Pura系列等多款热门机型也已纷纷展开升级适配，这意味着会有更多华为机型用户享受到HarmonyOS带来的常用常新体验。从用户反馈来看，华为Mate60系列机型在升级HarmonyOS4.2之后，体验全方位跃升。尤其是华为M
电脑操作系统有哪些
Jan 12, 2024 pm 03:12 PM
电脑操作系统就是用于管理电脑硬件和软件程序的系统，同时也是根据所有软件系统去开发的操作系统程序，而不同的操作系统，对应的使用人群也是不同的，那么电脑系统有哪些呢？下面，小编跟大家分享电脑操作系统有哪些。所谓的操作系统就是管理电脑硬件与软件程序，所有的软件都是基于操作系统程序的基础上去开发的。其实操作系统种类是很多的，用工业用的，商业用的，个人用的，涉及的范围很广。下面，小编跟大家讲解电脑操作系统有哪些。电脑操作系统有哪些windows系统Windows系统是由美国微软公司开发的一款操作系统。比最
Oracle数据库中修改系统日期方法详解
Mar 09, 2024 am 10:21 AM
Oracle数据库中修改系统日期方法详解在Oracle数据库中，修改系统日期的方法主要涉及到修改NLS_DATE_FORMAT参数和使用SYSDATE函数。本文将详细介绍这两种方法及其具体的代码示例，帮助读者更好地理解和掌握在Oracle数据库中修改系统日期的操作。一、修改NLS_DATE_FORMAT参数方法NLS_DATE_FORMAT是Oracle数据
Linux和Windows系统中cmd命令的区别与相似之处
Mar 15, 2024 am 08:12 AM
Linux和Windows是两种常见的操作系统，分别代表了开源的Linux系统和商业的Windows系统。在这两种操作系统中，都存在着命令行界面，用于用户与操作系统进行交互。在Linux系统中，用户使用的是Shell命令行，而在Windows系统中，用户使用的是cmd命令行。Linux系统中的Shell命令行是一个非常强大的工具，可以完成几乎所有的系统管理任
