简介：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. 使用ruby过程中遇到安装gem失败的一些通用解决方案

    ruby语言升级还是比较勤快的.但是数量众多的版本使得程序库的兼容性成了大问题.有些gem表示明确不支持某个特定版本以前的ruby,而有些gem则与较高的版本不兼容.再加上gem本身也有版本,简直是乱 ...

  2. ci框架里rewrite示例

    ci里新建应用app,入口文件app.php. Nginx 这里附上vhost配置 app.52fhy.com.conf server { listen 80; server_name app.52f ...

  3. Time33算法

    Time33是字符串哈希函数,现在几乎所有流行的HashMap都采用了DJB Hash Function,俗称"Times33"算法.Times33的算法很简单,就是不断的乘33. ...

  4. 每天一个linux命令（10）：cat 命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...

  5. 国内常用的三种框架：ionic/mui/framework7对比

    国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040

  6. datagridview控件去除页码

    开启datagridview的分页功能,默认页码是是显示的 为了不让页码显示,可以在绑定数据的是将其隐藏掉 gvLogName.BottomPagerRow.Visible = false; gvLo ...

  7. 在IIS中部署ASP.NET 5应用程序遭遇的问题

    用VS2015中创建了一个非常简单的ASP.NET5程序: 在Startup.cs中只输入一行代码: using System; using Microsoft.AspNet.Builder; usi ...

  8. 深入了解ibatis源码----简单ibatis示例代码

    搭建源码环境: 1.创建sql数据库. CREATE TABLE USER_ACCOUNT ( USERID INT(3) NOT NULL AUTO_INCREMENT, USERNAME VARC ...

  9. PhotoShop简介

    Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件.Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编 ...

  10. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...