每三秒执行一次,若是需要触发执行,可添加一个单击事件.
<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

    <title></title>

    <style type="text/css">
    .textC {

        position: absolute;

        width: 500px;

        overflow: hidden;

        margin-top: 100px;

        line-height: 30px;

        margin-left: 300px;

        height: 30px;

    }

    .textC span {

        color: #13BEEC;

        font-size: 28px;

        font-weight: bold;

        position: absolute;

    }</style>

    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            NumbersAnimate.Target = $(".textC");

            NumbersAnimate.Numbers = 12389623;

            NumbersAnimate.Duration = 1500;

            NumbersAnimate.Animate();

        });

        var NumbersAnimate = {

            Target: null,

            Numbers: 0,

            Duration: 500,

            Animate: function () {

                var array = NumbersAnimate.Numbers.toString().split("");

//遍历数组

                for (var i = 0; i < array.length; i++) {

                    var currentN = array[i];

//数字append进容器

                    var t = $("<span></span>");

                    $(t).append("<span class=\"childNumber\">" + array[i] + "</span>");

                    $(t).css("margin-left", 18 * i + "px");

                    $(NumbersAnimate.Target).append(t);

//生成滚动数字,根据当前数字大小来定

                    for (var j = 0; j <= currentN; j++) {

                        var tt;

                        if (j == currentN) {

                            tt = $("<span class=\"main\"><span>" + j + "</span></span>");

                        } else {

                            tt = $("<span class=\"childNumber\">" + j + "</span>");

                        }

                        $(t).append(tt);

                        $(tt).css("margin-top", (j + 1) * 25 + "px");

                    }

                    $(t).animate({marginTop: -((parseInt(currentN) + 1) * 25) + "px"}, NumbersAnimate.Duration, function () {

                        $(this).find(".childNumber").remove();

                    });

                }

            },

            ChangeNumber: function (numbers) {

                var oldArray = NumbersAnimate.Numbers.toString().split("");

                var newArray = numbers.toString().split("");

                for (var i = 0; i < oldArray.length; i++) {

                    var o = oldArray[i];

                    var n = newArray[i];

                    if (o != n) {

                        var c = $($(".main")[i]);

                        var num = parseInt($(c).html());

                        var top = parseInt($($(c).find("span")[0]).css("marginTop").replace('px', ''));

                        for (var j = 0; j <= n; j++) {

                            var nn = $("<span>" + j + "</span>");

                            if (j == n) {

                                nn = $("<span>" + j + "</span>");

                            } else {

                                nn = $("<span class=\"yy\">" + j + "</span>");

                            }

                            $(c).append(nn);

                            $(nn).css("margin-top", (j + 1) * 25 + top + "px");

                        }

                        var margintop = parseInt($(c).css("marginTop").replace('px', ''));

                        $(c).animate({marginTop: -((parseInt(n) + 1) * 25) + margintop + "px"}, NumbersAnimate.Duration, function () {

                            $($(this).find("span")[0]).remove();

                            $(".yy").remove();

                        });

                    }

                }

                NumbersAnimate.Numbers = numbers;

            },

            RandomNum: function (m, a) {

                var Range = a - m;

                var Rand = Math.random();

                return (m + Math.round(Rand * Range));

            }

        }

        $(function () {

            setInterval(function () {

                NumbersAnimate.ChangeNumber(NumbersAnimate.RandomNum(10000000, 19999999));

                console.log(11);

            }, 3000)

        })

    </script>

</head>

<body>

</body>

</html>

js数字自执行随机滚动的更多相关文章

  1. 通过JS生成由字母与数字组合的随机字符串

    在项目中可能需要随机生成字母数字组成的字符,如生成3-32位长度的字母数字组合的随机字符串(位数不固定)或者生成43位随机字符串(位数固定) 使用Math.random()与toString()方法的 ...

  2. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  3. js代码的执行顺序及运算

    代码执行顺序:从上往下,一行一行的执行(也叫一个模块一个模块的执行) 变量的提升(它不是变量的功能,而是浏览器的功能) js代码如何执行? js代码执行前,浏览器会给他一个全局的环境 叫window, ...

  4. php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）

    php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...

  5. (转载)js引擎的执行过程（二）

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...

  6. js数字位数太大导致参数精度丢失问题

    最近遇到个比较奇怪的问题,js函数里传参,传一个位数比较大,打印arguments可以看到传过来的参数已经改变. 然后查了一下,发现确实是js精度丢失造成的.我的解决方法是将数字型改成字符型传输,这样 ...

  7. 超简单的js数字验证

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  8. JS数字键盘

    JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...

  9. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

随机推荐

  1. JDK1.7安装和配置及注意事项

    要求 必备知识 windows 7 基本操作. 运行环境 windows 7 下载地址 环境下载 下载JDK 下载地址:http://www.oracle.com/technetwork/java/j ...

  2. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  3. 两个python安装模块后 ImportError: No module named

    问题描述:我的电脑安装了默认的arcgis自带的python,还自己安装了anaconda,所以有两个位置的python2.7 我自己使用arcgis的程序的时候,调用默认的那些是可以用的,但想使用d ...

  4. 无头浏览器phantomJS

    selenium: 有头浏览器的代表(selenium+python也可实现静默运行 引入python的一个包,包叫:虚拟屏幕pyvirtualdisplay) PhantomJS : 无头浏览器的代 ...

  5. Median absolute deviation | Singular Value Decomposition奇异值分解 | cumulative sums |

    Consider the data (1, 1, 2, 2, 4, 6, 9). It has a median value of 2. The absolute deviations about 2 ...

  6. 『TensorFlow』网络操作API_中_损失函数及分类器

    一.误差值 度量两个张量或者一个张量和零之间的损失误差,这个可用于在一个回归任务或者用于正则的目的(权重衰减). l2_loss tf.nn.l2_loss(t, name=None) 解释:这个函数 ...

  7. Socket中SO_REUSEADDR详解

    1.一般来说,一个端口释放后会等待两分钟之后才能再被使用,SO_REUSEADDR是让端口释放后立即就可以被再次使用. SO_REUSEADDR用于对TCP套接字处于TIME_WAIT状态下的sock ...

  8. Elasticsearch5.5安装部署

    一 ES基础知识介绍 Near Reamtime(NRT) Elasticsearch 是一个实时的查询平台,从索引数据开始到索引数据结束几乎是1s的时间 Cluster 集群是一个或多个节点的集合, ...

  9. mysql安装和初次密码修改

    下载 第一步:打开网址,https://www.mysql.com,点击downloads之后跳转到https://www.mysql.com/downloads 第二步 :跳转至网址https:// ...

  10. 汇编语言debug入门

    进入windows操作系统,因为我的虚拟机用的是win7 64位,所以装了一个Dos Box 的软件来执行这些指令. 输入debug回车,这样就进入了debug模式. 1: 输入 -r 查看或者修改寄 ...