简介：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. 【译】什么导致了Context泄露：Handler&内部类

    思考下面代码 public class SampleActivity extends Activity { private final Handler mLeakyHandler = new Hand ...

  2. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  3. 我的第一个Linux C 程序

    说明:上篇博客把gcc安装了,接着我们就尝试一下她的厉害吧. 我用的是vi的超级版本vim.这条指令,也就是用vim打开这个文件,如果文件不存在的话,那么创建这个文件. 关于Linux文件的创建,也可 ...

  4. UStore-自定义JDF文件格式输出

    系统默认的JDF输出不能满足我们的需求,往往不同的供应商输出不同要求的JDF格式.这里我们开始介绍ustore的自定义JDF输出 1.先屏蔽掉默认的JDF格式输出 我们进入Tigger来设置ustro ...

  5. swift 加载 storyboard 里的UIViewController

    let storyBoard:UIStoryboard! = UIStoryboard(name: "Main", bundle: nil) let deskVC:DeskView ...

  6. Java中 VO、 PO、DO、DTO、 BO、 QO、DAO、POJO的概念

    PO(persistant object) 持久对象 在 o/r 映射的时候出现的概念,如果没有 o/r 映射,没有这个概念存在了.通常对应数据模型 ( 数据库 ), 本身还有部分业务逻辑的处理.可以 ...

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

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

  8. settimeout里面函数有无双引号的区别

    在写定时器时很容易搞混,所以记下防止忘记. 双引号中的作用域不捕捉局部变量,不用双引号包着的是捕捉局部作用域 var a = function() { alert(1111) } function a ...

  9. WPF combobox

    先写一个数据类Grade.cs using System; using System.Collections.Generic; using System.Linq; using System.Text ...

  10. Android入门(九)文件存储与SharedPreferences存储

    原文链接:http://www.orlion.ga/578/ Android系统中主要提供了三种方式用于简单地实现数据持久化功能,即文件存储.SharedPreference存储以及数据库存储.当然, ...