基于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常用函数 不错
Sep 08 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
js querySelector() 使用方法
Dec 21 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python编写Logistic逻辑回归
2020/12/30 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python3 集合set入门基础
2020/02/10 Python
python re.match()用法相关示例
2021/01/27 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
百度JavaScript笔试题
2015/01/15 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
产品售后服务承诺书
2014/05/21 职场文书
展览会邀请函
2015/02/02 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python