基于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 判断 enter 事件
Feb 12 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 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执行sql语句的写法
2009/03/10 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php实现分页显示
2015/11/03 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
videocapture库制作python视频高速传输程序
2013/12/23 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
航空大学应届生求职信
2013/11/10 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
美术专业自荐信
2014/07/07 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
MySQL 服务和数据库管理
2021/11/11 MySQL
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL