溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用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> <div id="title" class="title">開始抽獎啦！</div> <div class="btns"> <span id="play">開 始</span> <span id="stop">停 止</span> </div> </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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
