利用JS实现数字增长

上次在项目中碰到要实现数字增长的效果，实现数字从0到目标数的增长，来看看效果图

现在把它扩展开来可以实现不同效果

主要思路就两部分

1.每隔三个数字之间加上,

2.实现动起来

对于1使用正则来完成十分的方便

this.fomatNum = function(num) {
      var str = num.toFixed(this.option.decimal);//精确到小数位数多少位
      var num1, x1, x2, reg;
      arr = str.split(".");
      x1 = arr[0];
      x2 = arr.length > 1 ? '.' + arr[1] : "";
      reg = /(\d+)(\d{3})/;
      if (this.option.isfomat) {
        while (reg.test(x1)) {
          x1 = x1.replace(reg, '$1' + "," + "$2");
        }
      }
      if (this.option.isfomat) {
        return this.option.prefix + x1 + x2;
      } else {
        return this.option.prefix + str;
      }
    }

要实现加起来的效果可以使用requestAnimationFrame方法，然后处理一下兼容就可以了。

var change = function() {
  var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//当前时间减去开始时间，然后除以总时间，Math.min,两个数取最小值。
  var nums = that.num * p;
  that.elm.innerHTML = that.fomatNum(that.num * p);
  if (p < 1.0) {//
     requestAnimationFrame(function() {
        change();
     });
   } else {
        cancelAnimationFrame(change);
       }
  }
  requestAnimationFrame(function() {
     change();
   });

如果要实现数字在可视区再动起来的效果，可以自己监听dom是否在可视区然后调用。

以上就是本文的全部内容，如果有疑问欢迎大家留言探讨，也谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 高效的jquery数字滚动特效

    高效的jquery数字滚动特效

    本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小数点:<div class="numberRun3"&g

  • jQuery+PHP实现动态数字展示特效

    HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

  • jquery+php实现滚动的数字特效

    jquery+php实现滚动的数字特效

    有时我们需要动态的展示访问次数.下载次数等效果,我们可以借助jQuery结合后台php实现一个滚动的数字展示效果. 本文以实时获取某产品的下载次数为场景,前台定时执行javascript获取最新的下载次数,并滚动更新页面上的下载次数. HTML 我们首先载入jQuery库文件和动画背景插件:animateBackground-plugin.js. <script type="text/javascript" src="js/jquery.js"><

  • javascript实现滚动效果的数字时钟实例

    javascript实现滚动效果的数字时钟实例

    网上关于javascript实现数字时钟效果的实例很多,但是本文给大家介绍的是滚动效果的数字时钟.小编觉得效果很炫,下面分享给大家. 先来看看很炫的效果 下面是代码实例 javascript代码部分: window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+n; } var oImg=document.getElementsByTagName("img"); set

  • Jquery数字上下滚动动态切换插件

    Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好. 我们先来看示例: 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; font-fami

  • 利用JS实现数字增长

    利用JS实现数字增长

    上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果图 现在把它扩展开来可以实现不同效果 主要思路就两部分 1.每隔三个数字之间加上, 2.实现动起来 对于1使用正则来完成十分的方便 this.fomatNum = function(num) { var str = num.toFixed(this.option.decimal);//精确到小数位数多少位 var num1, x1, x2, reg; arr = str.split("."); x1 = arr

  • 利用JS判断字符串是否含有数字与特殊字符的方法小结

    前言 本文主要介绍的是利用JS判断字符串是否含有数字与特殊字符的方法,文中有几种不同的方法,包括普通的JS验证法.正则表达式法,另外还有判断是否为浮点数的js函数,在最后还将简要介绍下isNAN函数的使用方法和例子,来一起学习学习吧. 一.正则表达式方法判断是否为数字,包括判断正整数: function checkRate(input) { var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字,//若判断正整数,则后边是:/^[1-9]+[0-9]*]*$/ if

  • 利用递增的数字返回循环渐变的颜色的js代码

    利用递增的数字返回循环渐变的颜色的js代码

    函数如下: 复制代码 代码如下: function gCL(i){ var f=parseInt((i%15)/5); i=i%15%5; switch(f){ case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00"; case 1:return "#00"+cS2(255-i*51)+cS2(i*51); case 2:return "#"+cS2(i*51)+"00"

  • 利用JS实现一个同Excel表现的智能填充算法

    利用JS实现一个同Excel表现的智能填充算法

    前言 本文介绍了关于利用JS实现同Excel表现的智能填充算法的相关内容,分享出供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 在使用Excel的时候,发现它的"智能填充"功能非常有趣,能够智能地分析我当前的内容,然后准确预测出我期望得到的值.排除了AI的加成,发现这个功能其实也可以通过数学理论和简单代码来实现.经过一番折腾,终于用JS实现了大致的功能,然后我把它名为smart-predictor. 项目地址:https://github.com/jrainlau/s...(本

  • countUp.js实现数字动态变化效果

    本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下 countUp.js官网:演示地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字增长效果</title> </head> <body> <h1 id="num1&q

  • JS猜数字游戏实例讲解

    本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若大于答案数字,则提示猜大了,若小于答案数字,则提示猜小了 4)直至10次机会用完或者猜对答案了,则结束游戏 <script type="text/javascript"> // 猜数字案例 function guessTip(min, max) { min =

  • 如何利用JS将手机号中间四位变成*号

    前言:无意间留意到一个面试题,需求是利用js将手机号中间四位变成*号,简单记录一下. 1. 利用字符串的substr方法 substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符. 语法:str.substr(start[, length]) 参数 start:开始提取字符的位置. length:可选.提取的字符数. var tel = 15617076160; tel = "" + tel; var newTel = tel.substr(0,3) + "**

  • 利用JS十分钟判断数组中存在元素的多种方式

    前言 在前端开发中,经常会遇到要判断数组中是否存在某个元素.其实判断的方式有很多种,我们一个一个来了解下. 我们先来定义一个数组: const arr = [ 13, false, 'abcd', undefined, 13, null, NaN, [1, 2], { a: 123 }, () => Date.now(), new Date('2021/03/04'), new RegExp('abc', 'ig'), Symbol('sym'), ]; 在这个数组中,我们包含了好几种类型:nu

  • 如何利用JS判断整数x是否是回文数

    目录 题目 解题思路 代码实现 其他方法 总结 题目 给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false . 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数.例如,121 是回文,而 123 不是. 示例 1: 输入:x = 121 输出:true 示例 2: 输入:x = -121 输出:false 解释:从左向右读, 为 -121 . 从右向左读, 为 121- .因此它不是一个回文数. 示例 3: 输入:x = 10 输出:false 解释

  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    目录 css动画 什么是时间轴动画? 动画对象 动画函数 思考 总结 css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { width: 100px; height: 100px; background: red; animation: changeColor 2s; } @keyframes changeColor { 0% {background: red;} 50% {background: yellow;} 100% {

随机推荐