基于JavaScript实现抽奖系统

用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。

功能：

- 点开始按钮开始抽奖，随机出现奖品名称； - 点停止按钮即可停止抽奖； - 按下回车键可切换开始抽奖和停止抽奖。

HTML代码：

创建html结构，最基础的要含有显示的奖品名称和开始、停止按钮。

rush:xhtml;"> <Meta charset="utf-8">

js主要代码片段：

首先，定义data数组，写入各奖品名称。并初始化timer定时器，和键盘事件状态flag(一开始状态为0，按下键盘变成1，再按键盘变成0，如此切换).

rush:js;"> var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null,flag = 0;

定义开始抽奖函数playFun();

rush:js;"> 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();

rush:js;"> function stopFun(){ //清除定时器即可结束抽奖 clearInterval(timer); var play = document.getElementById('play'); //改变将停止按钮背景色 play.style.background = '#036'; }

按回车键切换抽奖状态事件；

rush:js;"> 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完整代码：

<div class="jb51code">
<pre class="brush:js;">
var data = ['Phone7','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样式：

rush: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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。