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

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

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

keyEvent.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.最终实现效果如图所示:

JS实现一个简单的抽奖系统_第1张图片

你可能感兴趣的:(JavaScript,bootstrap,html,javascript)