php js抽奖,使用JavaScript如何实现抽奖系统

这篇文章主要为大家详细介绍了基于JavaScript实现抽奖系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

功能：

- 点开始按钮开始抽奖，随机出现奖品名称；

- 点停止按钮即可停止抽奖；

- 按下回车键可切换开始抽奖和停止抽奖。

html代码：

创建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;

}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：