基于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 位置插件
Dec 25 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
js中top的作用深入剖析
Mar 04 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
Vue router安装及使用方法解析
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 中执行系统外部命令
2006/10/09 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
简单实现python进度条脚本
2017/12/18 Python
Linux下多个Python版本安装教程
2018/08/15 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
大学社团活动策划书
2014/01/26 职场文书
读书活动总结范文
2014/04/26 职场文书
创先争优活动个人总结
2015/03/04 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
全新239军机修复记
2022/04/05 无线电
Consul在linux环境的集群部署
2022/04/08 Servers
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js