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

功能：

-点击开始按钮开始抽奖，奖品名称会随机出现；-点击停止按钮停止抽奖；-按回车键在开始抽奖和停止抽奖之间切换。

Html代码：

创建html结构，最基本的应该包含显示的奖品名称和开始和停止按钮。

！doctype html html head title traffle system/title metacarset=' utf-8 ' link type=' text/CSS ' rel='样式表' href=' CSS/style . CSS ' script type=' text/JavaScript ' src=' http : js/script . js '/script/head body div id=' title ' class=' title '开始抽奖！/div class=' btns ' span id=' play ' start/span span id=' stop ' stop/span/div/body/html js主要代码片段：

首先，定义数据数组，写下奖品名称。并初始化定时器定时器，以及键盘事件状态标志(状态一开始是0，然后按键盘变成1，再按键盘变成0，如此切换)。

Var数据=['Phone7 '，' Ipad '，'三星笔记本'，'佳能相机'，'惠普打印机'，'感谢参与'，' 100元充值卡'，' 1000元超市购物券']；定时器=null，标志=0；定义开始抽奖功能playFun()；

函数playFun(){ var title=document . getelementbyid(' title ')；var play=document . getelementbyid(' play ')；//每次先清除最后一个计时器任务，避免彩票结果的累计频率会越来越快clearInterval(计时器)；//每50毫秒触发一次定时器。timer=set interval(function(){//获取随机数varrandom=math . floor(math . random()* data . length)；//显示随机奖品名称title . innerhtml=data[random]；}, 50);//更改要开始播放的按钮的背景颜色. play.style.background=' # 666}定义停止抽奖功能stop fun()；

函数stopFun(){ //清除定时器结束抽奖clearInterval(定时器)；var play=document . getelementbyid(' play ')；//更改停止播放按钮的背景色. play.style.background=' # 036}按回车键切换抽奖状态事件；

document . onkeyup=function(event){ event=event | | window . event；//回车键的键码为13 if (event.keyCode==13) {//如果状态标志值为0，则开始抽奖并将状态值更改为1，否则停止抽奖并将状态值更改为0 if(标志==0){ playFun()；标志=1；} else { StOpfun()；标志=0；} }}js完整代码：

Var数据=['Phone7 '，' Ipad '，'三星笔记本'，'佳能相机'，'惠普打印机'，'感谢参与'，' 100元充值卡'，' 1000元超市购物券']，定时器=null，//timer flag=0；//用于键盘事件状态标志window . onload=function(){ var play=document . getelementbyid(' play ')，stop=document . getelementbyid(' stop ')；//开始抽奖玩法. play.onclick=playFunstop.onclick=stopFun//键盘事件document . onkeyup=function(event){ event=event | | window . event；if(event . key code==13){ if(flag==0){ playFun()；标志=1；} else { StOpfun()；标志=0；} } } }//启动抽奖功能playfun(){ var title=document . getelementbyid(' title ')；var play=document . getelementbyid(' play ')；//每次先清除最后一个计时器任务，避免彩票结果的累计频率会越来越快clearInterval(计时器)；timer=setInterval(function(){ var random=math . floor(math . random()* data . length)；title . innerhtml=data[random]；}, 50);play . style . background=' # 999 '；}//停止抽奖功能stop fun () {clearinterval(计时器)；var play=document . getelementbyid(' play ')；play . style . background=' # 036 '；}css样式：

* { margin : 0；padd : 0；}.title { font-size : 24px字体粗细：粗体；宽度： 400像素；高度： 70pxmargin: 0自动添加-top : 30px；文本对齐：中心；color: # f00}。btns { width : 190 pxh three : 30pxmargin 3360 0 auto }。BTN span { font-family : '微软雅黑；font-size : 14px线高： 27px显示器：块；向左浮动：宽度： 80px高度： 27px右边距： 10px光标：指针；文本对齐：中心；color: # fffborder: 1px固体# eee border-radius : 7px；背景技术： # 036;}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。