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

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

效果图如下：

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" />

     <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>

     <script type="text/javascript" src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script>

     <style type="text/css">

         #bigDiv {

             width: 1080px;

             margin: 0px auto; /*div网页居中*/

             background-color: #494949;

             color: #FFFFFF;

         }

         h1 {

             text-align: center; /*文本居中*/

             padding-top: 10px;

         }

         #first, #second, #third {

             width: 360px;

             height: 360px;

             font-size: 150px;

             line-height: 360px;

             text-align: center;

             float: left; /*让三个盒子左浮动*/

         }

         #first {

             background-color: #009BFF;

             opacity: 0.9;

         }

         #second {

             background-color: #007CCC;

         }

         #third {

             background-color: #005388;

         }

         input {

             font-size: 30px;

             font-weight: 900;

         }

         #start {

             margin-left: 40%;

             margin-right: 5%;

         }a{color:blue;}

     </style>

 </head>

 <body>

     <div id="bigDiv">

         <h1>玩家幸运抽奖活动</h1>

         <div id="first"></div>

         <div id="second"></div>

         <div id="third"></div>

         <input type="button" value="开始" id="start">

         <input type="button" value="停止" id="stop" disabled="disabled">

     </div>

     <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

         <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

         <p>来源： <a href="http://hovertree.com">何问起</a>

 <a href="http://hovertree.com/texiao/">特效库</a>

 <a href="http://hovertree.com/h/bjaf/07a7l2on.htm">代码说明</a></p>

     </div>

 </body>

 </html>

js文件代码如下：

 /**

  * Created by 何问起 午后的阳光 on 2016/5/14.

  */

 var ran = 0;

 var range = 0;

 var myNumber;

 /*将产生随机数的方法进行封装*/

 function sjs(range) {

     ran = Math.random() * range;//[0,range)的随机数

     var result = parseInt(ran);//将数字转换成整数

     return result;

 }

 /*对显示随机数的方法进行封装*/

 function showRandomNum() {

     var figure = sjs(range);

     $("#first").html(figure);

     var figure2 = sjs(range);

     $("#second").html(figure2);

     var figure3 = sjs(range);

     $("#third").html(figure3);

 }

 $(function () {

     /*点击开始按钮,产生的事件*/

     $("#start").click(function () {

         range = prompt("请输入随机数范围：", "168");

         if (range == null)//http://hovertree.com/h/bjaf/3siyd3x7.htm

         {

             return;

         }

         if (range == 0)

         {

             return;

         }

         if (isNaN(range))//http://hovertree.com/h/bjaf/9vhm2l4f.htm

         {

             alert("请输入数字");

             return ;

         }

         /*将开始标签禁用，停止标签启用*/

         $("#start")[0].disabled = true;

         $("#stop")[0].disabled = false;

         if (range > 9999 || range<-999)

         {

             // by 何问起

             $("#bigDiv div").css("font-size", "60px");//http://hovertree.com/h/bjaf/omgdn4mu.htm

             //return;

         }

         myNumber = setInterval(showRandomNum, 50);//多长时间运行一次，单位毫秒

     });

     /*点击结束按钮*/

     $("#stop").click(function () {

         /*将开始标签启用，停止标签禁用*/

         $("#start")[0].disabled = false;

         $("#stop")[0].disabled = true;

         clearInterval(myNumber);

     });

 });

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

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

jquery输入数字随机抽奖特效的更多相关文章

  1. jquery只能输入数字方法

    本方法为验证文本框的输入内容,如果输入的是数字,则提示"√".否则提示“必填,且只能输入数字字符”.在线体验效果:http://keleyi.com/keleyi/phtml/zz ...

  2. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  3. 使用jquery控制只能输入数字，并且关闭输入法（转）

    控制文本框只能输入数字是一个很常见的需求,比如电话号码的输入.数量的输入等,这时候就需要我们控制文本框只能输入数字.在用js控制之后在英文输入法的状态下去敲击键盘上的非数字键是输不进去的,然而当你转到 ...

  4. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

  5. JQuery限制文本框只能输入数字和小数点的方法

    <input type="text" class="txt NumText"  Width="100px"  /> $(func ...

  6. jquery控制input只能输入数字和两位小数

    jquery代码 function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字" ...

  7. jquery -- jquery控制只能输入数字和小数点

    控制文本框只能输入数字是一个很常见的需求,比如电话号码的输入.数量的输入等,这时候就需要我们控制文本框只能输入数字.在用js控制之后在英文输入法的状态下去敲击键盘上的非数字键是输不进去的,然而当你转到 ...

  8. jQuery动态数字翻滚计数到指定数字的文字特效代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 用Jquery控制文本框只能输入数字和字母及jquery自定义方法$.fn

    封装成onlyNum(),onlyAlpha()和onlyNumAlpha()3个Jquery扩展方法,方便复用,由于里面一些JS代码涉及到了"禁用输入法,获取剪切板的内容",而& ...

随机推荐

  1. 如何在CRM系统中集成ActiveReports最终报表设计器

    有时候,将ActiveReports设计器集成到业务系统中,为用户提供一些自定义的数据表,用户不需要了解如何底层的逻辑关系和后台代码,只需要选择几张关联的数据表,我们会根据用户的选择生成可供用户直接使 ...

  2. Effective Java 创建和销毁对象

    <Effective Java>阅读笔记,用适合自己理解的方式提炼该书内容.<Effective Java>是一本很实用的书,阅读方法应该是快速的领会,总结,然后应用.而非,一 ...

  3. Hibernate SQL实际sql语句监控- p6spy+hibernate+proxool 设置

    由于ORM工具的缘故,我们调试程序的时候远没有直接在程序里直接写个string的SQL简单,想当年查个sql是有多么的幸福,一行sql = "select * from ..."找 ...

  4. 什么是P3O？

    P3O(Portfolio, Programme and Project Offices)项目组合.项目群和项目办公室资格认证. 是由英国商务部 OGC 于2008年10月28日发布的最新的最佳实践指 ...

  5. DDD~WCF做中间件，实现多个项目的缓存共享

    回到目录 事情是这样的,前台网站有些数据不希望每次都从数据库里读,所以,应该做个缓存,而引起缓存更新的入口来自网站的后台管理,而前台和后台被部署在不同的网站中,这时缓存的更新就成了问题,前台的缓存与后 ...

  6. 大叔也说Xamarin~Android篇~ListView里的Click事件并获取本行的其它元素

    回到目录 我原创,我贡献,我是仓储大叔 本篇大叔原创,本着对技术的热爱去研究它,把成果分享给国人!大叔始终相信一句话:你只有选择一个感兴趣的工作,你才能更好的发挥你的潜力,而这一切都建立在你不断研究, ...

  7. 爱上MVC~为DisplayNameFor添加扩展，支持PagedList集合

    回到目录 DisplayNameFor方法是MVC提供给我们的,它可以将模型的DisplayName特性的值显示到页面上,这对程序员来说很是方便,在进行实体设计时,可以指定它的显示名称,然后MVC引擎 ...

  8. Java程序员的日常——存储过程知识普及

    存储过程是保存可以接受或返回用户提供参数的SQL语句集合.在日常的使用中,经常会遇到复杂的业务逻辑和对数据库的操作,使用存储过程可以进行封装.可以在数据库中定义子程序,然后把子程序存储在数据库服务器, ...

  9. lua如何调用C++函数

    第一步是定义函数.所有在Lua中被调用的C/C++函数将使用下面一类指针进行调用: typedef int (*lua_CFunction) (lua_State *L); 换句话说,函数必须要以Lu ...

  10. iOS-SDWebImage

    我之前写过一篇博客,介绍缓存处理的三种方式,其中最难,最麻烦,最占内存资源的还是图片缓存,最近做的项目有大量的图片处理,还是采用了SDWebImage来处理,但是发现之前封装好的代码报错了.研究发现, ...