js实现数字跳动到指定数字

 jumpNumber(startNum, targetNum, time = 1, selector) {
      let dom = document.getElementById(selector);
      let originNum = startNum;
      let stepNum = 0;
      let timeNum = time;
      dom.innerHTML = startNum;
      let timeId = setInterval(() => {
        if (originNum < targetNum) {
          timeNum -= 0.001;
          let strNum = originNum.toString(); // 数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字,所有后三位数随机跳动的方式进行模拟生成
          if (targetNum.toString().length < 6) {
            stepNum += 1; // 这样才可以实现越跳越快的效果
            originNum = originNum + stepNum;
            dom.innerHTML = originNum;
          } else {
            stepNum += 500; // 这样才可以实现越跳越快的效果
            originNum = originNum + stepNum;
            dom.innerHTML =
              strNum.substr(0, strNum.length - 3) +
              Math.floor(Math.random() * 10) +
              Math.floor(Math.random() * 10) +
              Math.floor(Math.random() * 10);
          }
        } else {
          dom.innerHTML = targetNum;
          clearInterval(timeId);
        }
      }, timeNum);
    },


//引用
this.jumpNumber(0, row.marginLimit, 1, "marginLimits");

//页面
 <span
              v-if="quota.marginLimit >= 0"
              class="green-text"
              id="marginLimits"
              >{{ quota.marginLimit.toLocaleString() }}</span
            >
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容