基于JavaScript实现抽奖系统

2024-05-06 16:41:59

字体：大中小

来源：转载

供稿：网友

用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>  <div id="title" class="title">开始抽奖啦！</div>  <div class="btns">    <span id="play">开 始</span>    <span id="stop">停 止</span>  </div></body></html>

js主要代码片段：

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

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

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

function playFun() {  var  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  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;}

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：详解ES6语法之可迭代协议和迭代器协议

下一篇：Parcel 打包示例(React HelloWorld)