简介：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. js模版引擎handlebars.js实用教程——另一种Helper用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  2. 【OpenGL(SharpGL)】支持任意相机可平移缩放的轨迹球实现

    [OpenGL(SharpGL)]支持任意相机可平移缩放的轨迹球 (本文PDF版在这里.) 在3D程序中,轨迹球(ArcBall)可以让你只用鼠标来控制模型(旋转),便于观察.在这里(http://w ...

  3. Vuejs注意点

    1.多级联动的时候,前一级变的时候,首先要把后面级的内容清空,要不然用户可能把前一次后面级的选择和新的前一级的选择提交(即后边级的列表渲染出来了,单但用户没有选择,此时vue绑定的是上一次的数据). ...

  4. Atian inputmethod 输入法解决方案 方言与多语言多文字支持 英语汉字汉语阿拉伯文的支持 (au

    Atian inputmethod 输入法解决方案 方言与多语言多文字支持 英语汉字汉语阿拉伯文的支持 (au 1.1. Overview概论 支持母语优先的战略性产品,主要是针对不想以及不愿使用普通 ...

  5. ASP.NET Web API 2框架揭秘

    ASP.NET Web API 2框架揭秘(.NET领域再现力作顶级专家精讲微软全新轻量级通信平台) 蒋金楠 著   ISBN 978-7-121-23536-8 2014年7月出版 定价:108.0 ...

  6. redis基本配置和相关设置

    redis-cli:the redis command line interface command line usage: $redis-cli incr mycounter 输出的结果只会显示在终 ...

  7. fir.im Weekly - 1000 个 Android 开源项目集合

    冬天到了,适宜囤点代码暖暖身.本期 fir.im Weekly 收集了最近一些不错的 GitHub 源码.开发工具和技术实践教程类文章分享给大家. codeKK - 集合近 1000 Android ...

  8. token防止表单重复提交

    出现表单重复提交的三种情况: 一.服务器响应缓慢,用户多次点击提交按钮. 二.提交成功后刷新页面. 三.提交成功后返回表单页面再次点击提交. package com.jalja.token; impo ...

  9. SQL Server 2014新特性-原生备份加密

    注:本篇文章是IT68找我的约稿,原文地址:http://tech.it168.com/a2014/0610/1633/000001633147.shtml       SQL Server 2014 ...

  10. WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...