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

原创 2016年06月01日 17:54:44

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

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS实现转动随机数抽奖的特效代码

现在抽奖游戏应用的非常广泛,我们每个人都会接触到,尤其是节假日的时候各大商场都会组织这种类型的游戏活动吸引顾客,我上面分享的这段代码其实还有很多可以改进,丰富的地方,比如我们可以美化它的界面,功能更加...

《用JavaScript实现幸运大转盘抽奖程序》 一

前些日子开发了一个抽奖程序,这个程序百分之九十的逻辑使用JavaScript和JQuery写的,瞬间感觉能JS学到极致,也是一种境界,虽然自己继续向这种境界前进。      首先说一下这抽奖程序的大体...

一个简单的抽奖系统

  • 2012年05月07日 15:35
  • 479KB
  • 下载

js实现的一个简易抽奖

  • 2013年11月22日 15:17
  • 1KB
  • 下载

《js事件探秘》学习——实现抽奖系统

抽奖系统的原理: 加一个定时器,不断生成随机数——把要抽的东西写在数组内,定时器隔一段时间生成一个随机数,根据随机数去把数据里对应的数找出来。 细节问题总结 1.每触发一次点击事件,会新开一...
  • mmrsdym
  • mmrsdym
  • 2014年10月10日 11:46
  • 679

一个简单的抽奖机(Java实现)

  • 2010年05月21日 23:00
  • 4KB
  • 下载

一个简单抽奖算法的实现以及如何预防超中

一个简单抽奖算法的实现以及如何预防超中 需求 每个用户每天有3次抽奖机会; 抽奖奖池一共分为6档内容:现金红包1元,2元,3元,5元,iphone6s,谢谢参与; 支持每天调整和配置抽奖的...

使用Node.js + MongoDB实现一个简单的日志分析系统

在最近的项目中,为了便于分析把项目的日志都存成了JSON格式。之前日志直接存在了文件中,而MongoDB适时闯入了我的视线,于是就把log存进了MongoDB中。log只存起来是没有意义的,最关键的是...
  • pianzif
  • pianzif
  • 2014年07月03日 08:33
  • 839

java做的一个简单的抽奖机

  • 2010年10月13日 01:14
  • 16KB
  • 下载

简单抽奖活动js代码

代码如下:(兼容Firefox和ie) Document .wrapper{width:600px;margin:0 auto;text-align: center;} .s...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS实现一个简单的抽奖系统
举报原因:
原因补充:

(最多只允许输入30个字)