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脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++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全
常用常新！華為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
蘋果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
電腦作業系統有哪些
Jan 12, 2024 pm 03:12 PM
電腦作業系統就是用來管理電腦硬體和軟體程式的系統，同時也是根據所有軟體系統去開發的作業系統程序，而不同的作業系統，對應的使用人群也是不同的，那麼電腦系統有哪些呢？下面，小編跟大家分享電腦作業系統有哪些。所謂的作業系統就是管理電腦硬體與軟體程序，所有的軟體都是基於作業系統程式的基礎上去開發的。其實作業系統種類是很多的，用工業用的，商業用的，個人用的，涉及的範圍很廣。下面，小編跟大家講解電腦作業系統有哪些。電腦作業系統有哪些windows系統Windows系統是美國微軟公司所開發的作業系統。比最
Linux與Windows系統中cmd指令的差異與相似之處
Mar 15, 2024 am 08:12 AM
Linux和Windows是兩種常見的作業系統，分別代表了開源的Linux系統和商業的Windows系統。在這兩種作業系統中，都存在著命令列介面，用於使用者與作業系統互動。在Linux系統中，使用者使用的是Shell命令列，而在Windows系統中，使用者使用的是cmd命令列。 Linux系統中的Shell命令列是一個非常強大的工具，可以完成幾乎所有的系統管理任
Oracle資料庫中修改系統日期方法詳解
Mar 09, 2024 am 10:21 AM
Oracle資料庫中修改系統日期方法詳解在Oracle資料庫中，修改系統日期的方法主要涉及修改NLS_DATE_FORMAT參數和使用SYSDATE函數。本文將詳細介紹這兩種方法及其具體的程式碼範例，幫助讀者更好地理解並掌握在Oracle資料庫中修改系統日期的操作。一、修改NLS_DATE_FORMAT參數方法NLS_DATE_FORMAT是Oracle數據
