基于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 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JS实现时间校验的代码
May 25 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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 生成N个不重复的随机数
2015/01/21 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
精选奢华:THE LIST
2019/09/05 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
企业精神口号
2014/06/11 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
python在package下继续嵌套一个package
2022/04/14 Python