基于JavaScript实现抽奖系统-偶像资源网

用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>
 <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 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;
}

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

基于JavaScript实现抽奖系统

请登录后发表评论