基于JavaScript实现抽奖系统


Posted in Javascript onJanuary 16, 2018

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

功能:

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

基于JavaScript实现抽奖系统

html代码:

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

<!doctype html>
<html>

<head>
 <title>抽奖系统</title>
 <meta charset="utf-8">
 <link type="text/css" rel="stylesheet" href="css/style.css">
 <script type="text/javascript" src="js/script.js"></script>
</head>

<body>
 <div id="title" class="title">开始抽奖啦!</div>
 <div class="btns">
  <span id="play">开 始</span>
  <span id="stop">停 止</span>
 </div>
</body>

</html>

js主要代码片段:

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

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

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

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 #Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 #Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 #Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 #Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 #Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 #Javascript
You might like
PHP的变量类型和作用域详解
2014/03/12 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python线程创建和终止实例代码
2018/01/20 Python
详解python单元测试框架unittest
2018/07/02 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Python subprocess库的使用详解
2018/10/26 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
给同事的道歉信
2014/01/11 职场文书
中学生校园广播稿
2014/01/16 职场文书
党员公开承诺事项
2014/03/25 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
员工2014年度工作总结
2014/12/09 职场文书
企业安全生产规章制度
2015/08/06 职场文书
初中语文教学随笔
2015/08/15 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
初一语文教学反思
2016/03/03 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js