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

本文主要介绍如何通过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);//通过上一句可以知道，空格键的键值为32if(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.最终实现效果如图所示：

JS实现一个简单的抽奖系统相关推荐

原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
实现一个简单的抽奖系统
文章目录前言一.先定义一个div. 二.JavaScript内容 1.先准备需要抽奖的人(数据),定义一个方法 2.实现滚动的特效总结前言利用html,css,JavaScript来实现一个 ...
JS实现一个简单的抽奖页面
一开始的抽奖界面是这样的: 按下键盘然后松开就是这样: 代码如下: <!DOCTYPE html> <html lang="en"><head> ...
一个简单的blog系统（九）增加标签和标签页面
一个简单的blog系统(九) 增加标签和标签页面 1.现在,我们来给博客添加标签和标签页面. 假定每篇文章最多只有两个标签,当单机主页左侧标签页链接的时候,跳转到标签页并且列出所有已经有的标签,当单击 ...
一个简单的blog系统（十一）增加文章检索功能
一个简单的blog系统(十一) 增加文章检索功能 1. 现在,我们就来给博客添加文章检索功能.假定,可以根据关键字魔木查询文章标题,也就是说支持正则表达式,而且字母不会区分大小写. 1.1 首先,我们 ...
一个简单的blog系统（四）实现用户页面和文章页面
一个简单的blog系统(四) 实现用户页面和文章页面 1.现在我们来给博客添加用户页面和文章页面. 1.1 所谓用户页面就是当单击某个用户名链接时,跳转到:域名/u/用户名,并且跳出该用户的所有文章. ...
一个简单的blog系统（十二）增加友情链接页面
一个简单的blog系统(十二) 增加友情链接页面 1.首先,我们打开header.ejs,在其中添加一行代码,并作出响应修改: <li><a href="/links&qu ...
Node.js搭建一个简单的服务器
文章目录 Node.js的安装了解Node.js模块系统服务器的搭建一.创建一个Web服务器注意程序代码运行二.静态资源托管静态资源注意程序代码运行三.简单接口的实现(简单服务 ...
JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

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

JS实现一个简单的抽奖系统相关推荐

最新文章

热门文章