如何将前端值传递给 JavaScript 计数器？答案

【问题标题】：How do I pass a front end value to JavaScript counter?如何将前端值传递给 JavaScript 计数器？
【发布时间】：2019-10-21 11:12:41
【问题描述】：

我正在尝试根据this answer 从前端传递一个值。

我的标记：

<h2 id="number">84</h2>

JavaScript 函数：

function animateValue(id, start, end, duration) {    
     var range = end - start;
     var current = start;
     var increment = end > start? 1 : -1;
     var stepTime = Math.abs(Math.floor(duration / range));
     var obj = document.getElementById(id);
     var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
          if (current == end) {
            clearInterval(timer);
          }
        }, stepTime);
      }


      animateValue("number", 0, 84, 5000);

所以如果我输入<h2 id="number">98</h2>，它应该数到98

【问题讨论】：

只需删除end 参数并通过Number(innerText) 从obj 中获取号码？
你能澄清你的问题或添加一个例子吗？
@Jervz09 例如
154
应该计数到 154
你的意思是需要在body中插入h2标签并向上计数？
@buzz 检查我的答案！

标签： javascript jquery

【解决方案1】：

试试吧！并享受：D

<!DOCTYPE html>
<html>
<body>


<button type="button"
onclick="animateValue()"></button>

<h2 id="number">98</h2>
</body>

</html> 
<script>

function animateValue(id, start, end, duration) {    
     var range = end - start;
     var current = start;
     var increment = end > start? 1 : -1;
     var stepTime = Math.abs(Math.floor(duration / range));
     var obj = document.getElementById(id);
     var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
          if (current == end) {
            clearInterval(timer);
          }
        }, stepTime);
      }

  var x = document.getElementById("number").textContent; //Get number that you want :D
      animateValue("number", 0, x, 5000);

</script>

【讨论】：

谢谢！我想重用这个函数，所以我最终这样做了：jsfiddle.net/buzz868/rc2knhyx/2

154