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

来源：互联网发布：怎么阻止软件自动更新编辑：程序博客网时间：2024/06/10 05:01

本文主要介绍如何通过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.最终实现效果如图所示：

这里写图片描述

0 0