您的位置：首页 > Web前端 > JavaScript

JS实现一个简单的抽奖系统

2016-06-01 17:54 921 查看

本文主要介绍如何通过js中的setInterval()函数实现一个抽奖系统。在该系统中，我们不只是可以通过点击按钮来进行操作，还可以通过敲击键盘来进行操作。这里主要涉及到js中的事件处理程序，用到了onkeyup()函数来进行键盘事件的触发。下面介绍一下主要的实现过程。

1.首先，我们需要建立一个html文件，在该文件中，我们主要写入抽奖区域和两个按钮（一个开始按钮，一个结束按钮）。其中使用到了bootstrap中的buttons插件，美化按钮效果。代码如下：

keyEvent.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖系统</title>
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
<link rel="stylesheet" href="keyEvent.css">
<script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/Buttons/2.0.0/js/buttons.min.js"></script>
<script src="keyEvent.js"></script>
</head>
<body>
<div id="title" class="title">
开始抽奖啦
</div>
<div class="btns">
<button class="button button-raised button-primary button-pill" id="play">开始</button>
<button class="button button-raised button-primary button-pill" id="stop">停止</button>
</div>
</body>
</html>

2.加入了keyEvent.css文件来修饰页面及按钮样式，代码如下：

keyEvent.css

*{
margin: 0;
padding: 0;
}
.title{
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
color:red;
}
.btns{
width: 400px;
height: 100px;
margin: 0 auto;
text-align: center;
}

3.下面就是最重要的js文件了。在这个文件中，我们将奖项初始化在一个名为data的数组里面，然后初始化一个计时器，并且初始化一个标识符flag,其初始值为0，主要用来判断用户第一次按下空格键时为开始操作，再按一次为结束操作，以此循环，因此flag只有0和1两个值，代表着两种状态。当点击开始按钮后，我们需将开始按钮设置为禁用状态，这里主要通过play.disabled=true;这条语句进行实现。其代码如下所示：

keyEvent.js:

var data=['iphone6','iphone 6s','单反相机','ipad','mac book','三星手机','小米手机','魅族手机','谢谢参与'];
var timer=null;
var flag=0;
window.onload=function(){
var title=document.getElementById('title');
var play=document.getElementById('play');
var stop=document.getElementById('stop');

// 点击开始按钮时，调用playFun函数
play.onclick=playFun;
// 结束
stop.onclick=stopFun;

// 键盘事件
document.onkeyup=function(event){
//打印出键盘的键值
console.log(event.keyCode);

//通过上一句可以知道，空格键的键值为32
if(event.keyCode==32){
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}

//开始抽奖
function playFun(){
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
console.log(data[random]);
title.innerHTML=data[random];
},50);
play.disabled=true;
}

//结束抽奖
function stopFun(){
clearInterval(timer);
play.disabled=false;
}

4.最终实现效果如图所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap html javascript

相关文章推荐

新的分享

章节导航