每三秒执行一次,若是需要触发执行,可添加一个单击事件.
<!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. 剑指offer（57）二叉树的下一个节点

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 题目分析 这题一定要画图,因为只有画图我们才能分清楚下 ...

  2. freeswqitch odbc

    1.安装驱动 yum install unixODBC unixODBC-devel libtool-ltdl libtool-ltdl-devel -y yum install mysql-conn ...

  3. JDK的安装与测试

    一,下载并安装JDK1.8版本以上 1.Oracle官网下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downl ...

  4. Learning-Python【27】：异常处理

    一.错误与异常 程序中难免会出现错误,而错误分为两种 1.语法错误:这种错误,根本过不了 Python 解释器的语法检测,必须在程序执行前就改正 2.逻辑错误:比如用户输入的不合适等一系列错误 那什么 ...

  5. Globecom 2018 投稿过程

    Globecom 2018 投稿过程 IEEE 通信领域旗舰型会议 Globecom 2018 将于近日提交 Camera-Ready 稿件.回顾今年投稿过程,虽麻烦不断但也不算特别曲折,本篇随笔记录 ...

  6. 【HNOI 2018】寻宝游戏

    Problem Description 某大学每年都会有一次 \(Mystery\ Hunt\) 的活动,玩家需要根据设置的线索解谜,找到宝藏的位置,前一年获胜的队伍可以获得这一年出题的机会. 作为新 ...

  7. 获取经纬度之间两点间真实距离（适用于GoogleMap,BaiduMap,Amap等）

    如何获取经纬度之间两点间真实距离(适用于GoogleMap,BaiduMap,Amap等)  目标:使用百度定位sdk开发实时移动距离计算功能,根据经纬度的定位,计算行驶公里数并实时刷新界面显示.大家 ...

  8. _quest_random

    -- 随机任务-- 可以实现玩家随机获取任务-- 小技巧:需要控制物品法防,在_function_menu表配置物品indexID为28 `comment`备注 `questId`任务ID `chan ...

  9. Python3文件操作1 --Python3

    1.文件的两种类型 文本文件:由单一特定的编码字符组成(如:txt文件) 二进制文件:直接由比特0和比特1组成,文件内部数据组织格式与文件的用途有关(视频.图片) 2.文件主要操作概述 Python对 ...

  10. 词向量编码 word2vec

    word2vec word2vec 是Mikolov 在Bengio Neural Network Language Model(NNLM)的基础上构建的一种高效的词向量训练方法. 词向量 词向量(w ...