基于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 相关文章推荐
解密效果
Jun 23 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
VOLVO车载收音机
2021/03/02 无线电
如何利用php+mysql保存和输出文件
2006/10/09 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
python实现dict版图遍历示例
2014/02/19 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python基于SMTP协议发送邮件
2019/05/31 Python
django自带调试服务器的使用详解
2019/08/29 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python如何快速生成时间戳
2020/07/21 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
未婚证明书模板
2014/10/08 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
会议主持词结束语
2015/07/03 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
Java spring单点登录系统
2021/09/04 Java/Android