JavaScript实现抽奖系统实例分享

本文主要为大家详细介绍了基于javascript实现抽奖系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。

功能：

- 点开始按钮开始抽奖，随机出现奖品名称；
- 点停止按钮即可停止抽奖；
- 按下回车键可切换开始抽奖和停止抽奖。

效果

立即学习“Java免费学习笔记（深入）”；

html代码：

创建html结构，最基础的要含有显示的奖品名称和开始、停止按钮。

  
  
  
  



  
开始抽奖啦！
  

    开 始
    停 止
  

js主要代码片段：

首先，定义data数组，写入各奖品名称。并初始化timer定时器，和键盘事件状态flag(一开始状态为0，按下键盘变成1，再按键盘变成0，如此切换).

var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券'];
  timer = null,
  flag = 0;

定义开始抽奖函数playFun();

天天团购系统

天天团购系统是一套强大的开源团购程序，采用PHP+mysql开发，系统内置支付宝、财付通、GOOGLE地图等接口，支持短信发送团购券和实物团购快递发货等；另外可通过Ucenter模块，与网站已有系统无缝整合，实现用户同步注册、登陆、退出。 天天团购系统是一套创新的开源团购程序，拥有多达10项首创功能，同时支持虚拟和实物团购，内置类似淘宝的快递配送体系，并提供强大的抽奖、邀请返利等营销功能，让您轻松

下载

function playFun() {
  var title = document.getElementById('title');
  var play = document.getElementById('play');
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  //定时器50毫秒触发一次
  timer = setInterval(function(){
    //获取奖品下标随机数
    var random = Math.floor(Math.random() * data.length);
    //显示随机的奖品名称
    title.innerHTML = data[random];
  }, 50);
  //改变将开始按钮背景色
  play.style.background = '#666';
}

定义停止抽奖函数stopFun();

function stopFun(){
  //清除定时器即可结束抽奖
  clearInterval(timer);
  var play = document.getElementById('play');
  //改变将停止按钮背景色
  play.style.background = '#036';
}

按回车键切换抽奖状态事件；

document.onkeyup = function(event){
  event = event || window.event;
  //回车键键码为13
  if (event.keyCode == 13) {
    //如果状态flag值为0则开始抽奖，并把状态值改为1，否则停止抽奖并把状态值改为0
    if (flag == 0){
      playFun();
      flag = 1;
    }else{
      stopFun();
      flag = 0;
    }
  }
}

js完整代码：

var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'],
  timer = null, //定时器
  flag = 0; //用于键盘事件状态标记

window.onload = function() {

  var play = document.getElementById('play'),
    stop = document.getElementById('stop');

  // 开始抽奖
  play.onclick = playFun;
  stop.onclick = stopFun;

  // 键盘事件
  document.onkeyup = function(event) {
    event = event || window.event;
    if (event.keyCode == 13) {
      if (flag == 0) {
        playFun();
        flag = 1;
      } else {
        stopFun();
        flag = 0;
      }
    }
  }
}
// 开始抽奖
function playFun() {
  var title = document.getElementById('title');
  var play = document.getElementById('play');
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  timer = setInterval(function() {
    var random = Math.floor(Math.random() * data.length);
    title.innerHTML = data[random];
  }, 50);
  play.style.background = '#999';
}
//停止抽奖
function stopFun() {
  clearInterval(timer);
  var play = document.getElementById('play');
  play.style.background = '#036';
}

css样式：

* {
  margin: 0;
  padding: 0;
}

.title {
  font-size: 24px;
  font-weight: bold;
  width: 400px;
  height: 70px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  color: #f00;
}

.btns {
  width: 190px;
  height: 30px;
  margin: 0 auto;
}

.btns span {
  font-family: '微软雅黑';
  font-size: 14px;
  line-height: 27px;
  display: block;
  float: left;
  width: 80px;
  height: 27px;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border: 1px solid #eee;
  border-radius: 7px;
  background: #036;
}

相关推荐：

jQuery实现简单的抽奖游戏技术分享

jQuery、PHP、Mysql实现抽奖程序实例详解

vue实现手机号码抽奖上下滚动动画实例分享