基于javascript实现简单的抽奖系统


Posted in Javascript onApril 15, 2020

本文实例为大家分享了js实现简单的抽奖系统,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="gb2312">
 <title>抽奖活动</title>
 <style>
*{
 margin:0;padding:0;
}
#title{
 color:red;text-align:center;margin:0 auto;width:240px;height:70px;padding-top:10px;background:opacity(0);
}
.btns{
 width:190px;height:30px;margin:0px auto;
}
 
.btns span{
 display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微软雅黑";font-size:14px;line-height:28px;margin-right:10px;
}
#txt{
 font-size:14px;color:#ccc999;text-align:center;margin:0 auto;width:190px;height:50px;padding-top:10px;
}
 </style>
 <script>
 var mytype=["iPhone6s","iPad Air2","DELL外星人","键鼠套装","1000元超市购物卡","200元话费充值卡","谢谢参与","品牌耳机","港澳台7日游","50元优惠券"],//定义奖品池
  timer=null,
  count=0;
//加载时触发
 window.onload=function(){
 var start = document.getElementById("start");
 var stop = document.getElementById("stop");
 
 start.onclick=startFun;//这个函数后面加括号,就直接调用了该函数,所以不要加
 stop.onclick=stopFun;
 
 //绑定键盘事件
 document.onkeyup=function(e){
  e = e || window.event;
 if(e.keyCode==13){
  if(count==0){
  startFun();
  count=1;
  }
 else{ 
  stopFun();
  count=0;
  }
 }
 }
 }
 
//点击开始,标题栏开始轮动
 function startFun(){
 clearInterval(timer);//开始时,清除计时器,避免二次触发
 var title = document.getElementById("title");
 var start = document.getElementById("start");
 
 timer = setInterval(function(){
  var num= Math.floor(Math.random()*mytype.length);
  title.innerHTML=mytype[num];
 },50);
 start.style.background="#ccc";
 
 }
 //点击停止,标题栏停止轮动并输出轮动结果
 function stopFun(){
 var start = document.getElementById("start"),
  txt = document.getElementById("txt"),
  title = document.getElementById("title");
 clearInterval(timer);//清除计时器,停止计时器
 start.style.background="#036";
 }
 
 
 </script>
<body>
 <div>
 <h2 id="title">开始抽奖!</h2>
 </div>
 <div class="btns">
 <span id="start">开始</span>
 <span id="stop">停止</span>
 </div>
 <div id="txt">支持回车键(Enter)开始/停止。</div>
</body>
</html>

效果图:

基于javascript实现简单的抽奖系统

想要学习更多关于javascript抽奖功能,请参考此专题:javascript实现抽奖功能

实现的功能就是这么简单,希望大家可以中大奖哦!

Javascript 相关文章推荐
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
a标签调用js的方法总结
Sep 05 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
基于javascript实现九宫格大转盘效果
May 28 #Javascript
全屏js头像上传插件源码高清版
Mar 29 #Javascript
js闭包引起的事件注册问题介绍
Mar 29 #Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 #Javascript
js滚动条平滑移动示例代码
Mar 29 #Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
js解决movebox移动问题
Mar 29 #Javascript
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
python求众数问题实例
2014/09/26 Python
python查询mysql中文乱码问题
2014/11/09 Python
Python实现把数字转换成中文
2015/06/29 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
财务会计自荐信范文
2014/02/21 职场文书
调查研究项目计划书
2014/04/29 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
西安事变观后感
2015/06/12 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL