基于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移动web开发的响应式布局设计
Dec 04 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
详解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程序的运行流程
2016/06/23 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python iter()函数用法实例分析
2018/03/17 Python
Python绘制3D图形
2018/05/03 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python实现文件的备份流程详解
2019/06/18 Python
python中数据库like模糊查询方式
2020/03/02 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python多线程和多进程关系详解
2020/12/14 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2015年暑期见闻
2015/07/14 职场文书