基于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 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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仿ZOL分页类代码
2008/10/02 PHP
PHP基本语法实例总结
2016/09/09 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python 26进制计算实现方法
2015/05/28 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
对python中的pop函数和append函数详解
2018/05/04 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python如何省略括号方法详解
2020/03/21 Python
Django使用rest_framework写出API
2020/05/21 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
Ajax和javascript的区别
2013/07/20 面试题
创业者是否需要商业计划书?
2014/02/07 职场文书
通用自荐信范文
2014/03/14 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
企业宣传策划方案
2014/05/29 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
立项申请报告范本
2015/05/15 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技