基于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 miscellanea -display data real time, using window.status
Jan 09 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
围观tangram js库
Dec 28 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue+iview实现分页及查询功能
Nov 17 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
正则表达式语法
2006/10/09 Javascript
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python实现针对中文排序的方法
2017/05/09 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python递归函数用法详解
2020/10/26 Python
python drf各类组件的用法和作用
2021/01/12 Python
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
农村党支部先进事迹
2014/01/14 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
郭明义观后感
2015/06/08 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技