简介：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. [PCB设计] 1、硬件原理图设计规范（一）——基本原则

    1.1 目的 原理图设计是产品设计的理论基础,设计一份规范的原理图对设计PCB.跟机.做客户资料具有指导性意义,是做好一款产品的基础.原理图设计基本要求: 规范.清晰.准确.易读. 因此制定此< ...

  2. XSS危害——session劫持

    在跨站脚本攻击XSS中简单介绍了XSS的原理及一个利用XSS盗取存在cookie中用户名和密码的小例子,有些同学看了后会说这有什么大不了的,哪里有人会明文往cookie里存用户名和密码.今天我们就介绍 ...

  3. LuaAlchemy API 介绍

    The AS3 Sugar provides a Lua-like way to access AS3 class and instance creation, property getter/set ...

  4. Winform文件下载之WebClient

    最近升级了公司内部使用的一个下载小工具,主要提升了下面几点: 1． 在一些分公司的局域网中,连接不上外网 2． 服务器上的文件更新后,下载到的还是更新前的文件 3． 没有下载进度提示 4． 不能终止下 ...

  5. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. 翻译：AKKA笔记 - Actor消息 -1（一）

    从第一篇Akka笔记的介绍中,我们是从很高的高度去观察Akka工具箱中的Actors.在这篇笔记的第二篇,我们会看一下Actors中的消息部分.而且延续上一次的例子,我们还会使用同样的学生与老师的例子 ...

  7. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  8. 大叔也说Xamarin~Android篇~环境部署与破解

    回到目录 现在移动开发很HOT,以至于很多人都转向了它,大叔也不例外,这次有机制接触一下xamarin这个东西,其实之前也用于xamarin,只是用来写网页程序,没有接触到移动开发,对于xamarin ...

  9. phpstudy80端口被占用时的解决方案

    1.适合人群? 之前笔记本单独安装过Apache.php.mysql环境,但是后期想用集成开发环境phpstudy的,安装完phpstudy后(之前的单独环境依然存在),发现启动时,总是显示80端口被 ...

  10. ui-router带参数的路由配置

    ui-router带参数的路由配置 使用ng-route的时候带参数的连接这样配置: $routeProvider.when('item/itemid/:itemid', { templateUrl: ...