数字滚动效果

• 简单版本数字中不带千分位符号

//html
<p id="num1">5665</p>
<p id="num2">45562</p>
<p id="num3">3221789</p>

//js
tiaodong_number('num1');
tiaodong_number('num2');
tiaodong_number('num3');
        
      function tiaodong_number(changeid) {
        var value_num = $("#" + changeid).text();
        var num = $("#" + changeid);
        num.animate({ count: value_num }, {
          duration: 1000,
          step: function () {
            num.text(String(parseInt(this.count)));
          },
          complete: function () {
            num.text(value_num);
          }
        });
      
      }

• 升级版本 数字中需要添加千分位

  
  image.png

//html
<p id="num1"></p>
<p id="num2"></p>
<p id="num3"></p>

        var num_data=[8957236,8957236,957236,8957,8957];
        tiaodong_number('num1',0);
        tiaodong_number('num2',1);
        tiaodong_number('num3',2);
            
           
      function tiaodong_number(changeid,index) {
      
        var value_num =num_data[index];//获得数字值
        var num = $("#" + changeid);//获得id名

        num.animate({ count: value_num }, {
          duration: 1000,
          step: function () {//过程数字展示
            let num_str1 =parseInt(this.count);
            num.text(num_str1.toLocaleString());
           
          },
          complete: function () {//结束数字展示
              let num_str = value_num;
            num.text(num_str.toLocaleString());
          }
        });
      
      }

知识点：升级方法主要使用了toLocaleString()方法
1.转换时间格式

转换时间
2.把数字转换成千分位格式
转换数字格式