基于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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
javascript 验证日期的函数
Mar 18 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
js中日期的加减法
May 06 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
Openlayers实现图形绘制
Sep 28 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
怎么写好自荐信
2013/10/30 职场文书
函授自我鉴定
2013/11/06 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
业务员简历自我评价
2014/03/06 职场文书
活动总结书
2014/05/08 职场文书
房屋出租委托书格式
2014/09/23 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
win10下go mod配置方式
2021/04/25 Golang
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
MYSQL 表的全面总结
2021/11/11 MySQL