这篇文章主要为大家详细介绍了基于javascript实现抽奖系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用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;}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中如何实现自定义全局方法
在vue2.0中如何实现子同级组件之间数据交互
在bootstrap中如何实现table支持高度百分比
在vue 2.x 中使用axios如何封装的get 和post方法
在vue组件传递对象中实现单向绑定，该怎么做？
以上就是使用javascript如何实现抽奖系统的详细内容。