jquery输入数字随机抽奖特效

简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果。效果展示 http://hovertree.com/te

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果。

效果展示 http://hovertree.com/texiao/jquery/76/

效果图如下:
jquery输入数字随机抽奖特效

代码如下:

 1 <!DOCTYPE html>  2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" />  6  7 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>  8 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script>  9 <style type="text/css"> 10  #bigDiv { 11  width: 1080px; 12  margin: 0px auto; /*div网页居中*/ 13  background-color: #494949; 14  color: #FFFFFF; 15 } 16 17  h1 { 18  text-align: center; /*文本居中*/ 19  padding-top: 10px; 20 } 21 22  #first, #second, #third { 23  width: 360px; 24  height: 360px; 25  font-size: 150px; 26  line-height: 360px; 27  text-align: center; 28  float: left; /*让三个盒子左浮动*/ 29 } 30 31  #first { 32  background-color: #009BFF; 33  opacity: 0.9; 34 } 35 36  #second { 37  background-color: #007CCC; 38 } 39 40  #third { 41  background-color: #005388; 42 } 43 44  input { 45  font-size: 30px; 46  font-weight: 900; 47 } 48 49  #start { 50  margin-left: 40%; 51  margin-right: 5%; 52 }a{color:blue;} 53 </style> 54 55 </head> 56 <body> 57 <div id="bigDiv"> 58 <h1>玩家幸运抽奖活动</h1> 59 <div id="first"></div> 60 <div id="second"></div> 61 <div id="third"></div> 62 <input type="button" value="开始" id="start"> 63 <input type="button" value="停止" id="stop" disabled="disabled"> 64 </div> 65 66 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 67 <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> 68 <p>来源: <a href="http://hovertree.com">何问起</a> 69 <a href="http://hovertree.com/texiao/">特效库</a> 70 <a href="http://hovertree.com/h/bjaf/07a7l2on.htm">代码说明</a></p> 71 </div> 72 </body> 73 </html>

js文件代码如下:

 1 /**  2  * Created by 何问起 午后的阳光 on 2016/5/14.  3 */  4 var ran = 0;  5 var range = 0;  6 var myNumber;  7 /*将产生随机数的方法进行封装*/  8 function sjs(range) {  9 ran = Math.random() * range;//[0,range)的随机数 10 var result = parseInt(ran);//将数字转换成整数 11 return result; 12 } 13 /*对显示随机数的方法进行封装*/ 14 function showRandomNum() { 15 var figure = sjs(range); 16 $("#first").html(figure); 17 var figure2 = sjs(range); 18 $("#second").html(figure2); 19 var figure3 = sjs(range); 20 $("#third").html(figure3); 21 } 22 $(function () { 23 /*点击开始按钮,产生的事件*/ 24 $("#start").click(function () { 25 26 range = prompt("请输入随机数范围:", "168"); 27 28 if (range == null)//http://hovertree.com/h/bjaf/3siyd3x7.htm 29  { 30 return; 31  } 32 33 if (range == 0) 34  { 35 return; 36  } 37 38 if (isNaN(range))//http://hovertree.com/h/bjaf/9vhm2l4f.htm 39  { 40 alert("请输入数字"); 41 return ; 42  } 43 /*将开始标签禁用,停止标签启用*/ 44 $("#start")[0].disabled = true; 45 $("#stop")[0].disabled = false; 46 if (range > 9999 || range<-999) 47  { 48 // by 何问起 49 $("#bigDiv div").css("font-size", "60px");//http://hovertree.com/h/bjaf/omgdn4mu.htm 50 //return; 51  } 52 myNumber = setInterval(showRandomNum, 50);//多长时间运行一次,单位毫秒 53  }); 54 /*点击结束按钮*/ 55 $("#stop").click(function () { 56 /*将开始标签启用,停止标签禁用*/ 57 $("#start")[0].disabled = false; 58 $("#stop")[0].disabled = true; 59  clearInterval(myNumber); 60  }); 61 });

转自:http://hovertree.com/h/bjaf/07a7l2on.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120372.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号