这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下。
用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'); //每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快 clearIntervaltimer); //定时器50毫秒触发一次 timer = setIntervalfunction){ //获取奖品下标随机数 var random = Math.floorMath.random) * data.length); //显示随机的奖品名称 title.innerHTML = data[random]; }, 50); //改变将开始按钮背景色 play.style.background = '#666'; }
定义停止抽奖函数stopFun);
function stopFun){ //清除定时器即可结束抽奖 clearIntervaltimer); var play = document.getElementById'play'); //改变将停止按钮背景色 play.style.background = '#036'; }
按回车键切换抽奖状态事件;
document.onkeyup = functionevent){ 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 = functionevent) { 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'); //每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快 clearIntervaltimer); timer = setIntervalfunction) { var random = Math.floorMath.random) * data.length); title.innerHTML = data[random]; }, 50); play.style.background = '#999'; } //停止抽奖 function stopFun) { clearIntervaltimer); 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; }
相信看了本文案例你已经掌握了方法,更多精彩请关注风君子博客其它相关文章!
推荐阅读:
Swiper实现移动端广告图片轮播
Vue组件通信Bus使用方法
以上就是JS做出随机抽奖系统的详细内容,更多请关注风君子博客其它相关文章!