基于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 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
JavaScript私有变量实例详解
Jan 24 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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过滤危险html代码的函数
2008/07/22 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
内科护士实习自我鉴定
2013/10/17 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
个人投资计划书
2014/05/01 职场文书
经典演讲稿汇总
2014/05/19 职场文书
设备管理实施方案
2014/05/31 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS