我正在尝试基于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
尝试一下！和享受：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>