Javascript Django变量的计数器动画

我想用Django变量做一个很酷的仪表板计数器动画。我的代码还没有呈现任何数字，所以我做错了什么

如果我想要的是：

以下是我目前的代码：

    <div class="row">
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-users"></i>
                <h2 class="users-count"></h2>
                <h3 class="count-label">Users</h3>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-handshake-o"></i>
                <h2 class="dealers-count"></h2>
                <h3 class="count-label">Dealers</h3>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-address-card"></i>
                <h2 class="staff-count"></h2>
                <h3 class="count-label">Employees</h3>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card m-2 p-4">
                <i class="counter-icon fa fa-eye"></i>
                    <h2 class="visitors-count"></h2>
                <h3 class="count-label">Visitors Today</h3>
            </div>
        </div>
    </div>

<script>    
document.addEventListener("DOMContentLoaded", () => {
 function counter(id, start, end, duration) {
  let obj = document.getElementsByClassName(id),
   current = start,
   range = end - start,
   visitors_range = 11 - start,
   increment = end > start ? 1 : -1,
   step = Math.abs(Math.floor(duration / range)),
   timer = setInterval(() => {
    current += increment;
    obj.textContent = current;
    if (current == end) {
     clearInterval(timer);
    }
   }, step);
 }
 counter("users-count", 0, {{users.count}}, 3000);
 counter("dealers-count", 100, {{dealers.count}}, 2500);
 counter("staff-count", 0, {{staff.count}}, 3000);
 counter("visitors-count", 0, {{visitors.count}}, 3000);
});
</script>

使用者
经销商
员工
今日访客
document.addEventListener（“DOMContentLoaded”，（）=>{
功能计数器（id、开始、结束、持续时间）{
设obj=document.getElementsByClassName（id），
电流=启动，
范围=结束-开始，
访客范围=11-开始，
增量=结束>开始？1:-1，
步骤=数学绝对值（数学楼层（持续时间/范围）），
计时器=设置间隔（（）=>{
电流+=增量；
obj.textContent=当前；
如果（当前==结束）{
清除间隔（计时器）；
}
}，步骤）；
}
计数器（“用户计数”，0，{users.count}}，3000）；
柜台（“交易商计数”，100，{{交易商计数}}，2500）；
计数器（“工作人员计数”，0，{staff.count}}，3000）；
柜台（“访客计数”，0，{{visitors.count}}，3000）；
});

您不共享Python代码，您确定

用户.count

等正在做您期望的事情吗？一种快速检查的方法是查看源代码并查看这些函数调用是如何呈现的。此外，虽然这不会导致动画根本无法运行，但您需要将

let

放在

timer=setInterval（…）

之前。现在，您只有一个全局的

timer

变量，我希望在解决另一个问题后，结果是除最后一个之外的所有动画都无法在应该停止的时候停止。您不共享Python代码，您确定

users.count

等正在做您期望的事情吗？一种快速检查的方法是查看源代码并查看这些函数调用是如何呈现的。此外，虽然这不会导致动画根本无法运行，但您需要将

let

放在

timer=setInterval（…）

之前。因为现在你只有一个全局的，

timer

变量，我希望结果是，一旦另一个问题被解决，除了最后一个之外的所有动画都会在应该停止的时候失败。