用逗号将数字从 0 变为值 - 从 var 中提取值答案

【问题标题】：Animate numbers from 0 to Value with Comma - Value is pulled from var用逗号将数字从 0 变为值 - 从 var 中提取值
【发布时间】：2021-10-22 15:24:43
【问题描述】：

正在努力解决这个问题，因此非常感谢任何想法或建议。

我有一个计算（工作），它计算自 2021 年 1 月 1 日以来已经过去了多少天，并且 * 按一个值计算。我想在 3 秒内从 0 动画到值，但是，我不知道如何绕过逗号 - 可以让它在没有逗号的情况下工作。

有什么建议吗？

var startDate = new Date('01-01-2021');
var today = new Date();
var diff = Math.floor((today - startDate)/(1000*60*60*24))
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
var answer = diff * 134256;
 
function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}
document.getElementById("CCalc").innerHTML = (commaSeparateNumber(answer));

&lt;p id="CCalc" class="fig-number"&gt;&lt;/p&gt;

【问题讨论】：

为什么用jquery和jquery-animate标记？问题/代码中的任何地方都没有 jQuery。
"...可以让它在没有的情况下工作。" - 问题中的示例没有任何动画，也没有任何工作。它只是以NaN 结尾
嗨 Andreas，它确实有效，并显示了 39,471,264 的值。根据我的问题，我正在寻找一些关于如何制作动画的指导。由于我所有的尝试都失败了，这就是为什么它被标记在这些部分中。
“它确实有效” 不适合我...，“我正在寻找一些关于如何制作动画的指导” -> How much research effort is expected of Stack Overflow users?

标签： javascript jquery jquery-animate

【解决方案1】：

这里是 jQuery 的代码：

var startDate = new Date('01-01-2021');
var today = new Date();
var diff = Math.floor((today - startDate)/(1000*60*60*24))
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
var answer = diff * 134256;
 
function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}
document.getElementById("CCalc").innerHTML = parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));


$(".fig-number").each(function () {
    $(this)
      .prop("Counter", 0)
      .animate(
        {
          Counter: $(this).text()
        },
        {
          duration: 3000,
          easing: "swing",
          step: function (now, tween) {
            // Check added for decimal number
            if(parseInt(tween.end) == parseFloat(tween.end)){
                var number = Math.ceil(now);
              $(this).text(number.toLocaleString());
            }
          },
        }
      );
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="CCalc" class="fig-number">39471264</p>

【讨论】：

谢谢，完美运行。我将研究 parseFloat 以供将来的应用程序使用 =)