基于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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 Javascript
Vue操作Storage本地化存储
Apr 29 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制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
python模仿网页版微信发送消息功能
2018/02/24 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Python的高阶函数用法实例分析
2019/04/11 Python
详解Python time库的使用
2019/10/10 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python中必要的名词解释
2019/11/20 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
德劲DE1105机评
2022/04/05 无线电
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技