数据在一定时间自增到指定值

 /*

     * startNum  代表要跳动的初始数字

     * targetNum 代表要跳动到的数字

     * time      代表要跳动需要花费的时间

     * selector  代表要跳动元素的选择器

     */

    setJumpNumber(time = 2) {

      let startNum = 0

      let domList = document.querySelectorAll('#num');

      [...domList].forEach((item, index) => {

        let dom=item;

        let targetNum = parseInt(item.innerHTML);

        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);

      });

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容