下面有 2 个函数 - myCalculator() 函数保存具有静态值的变量,animateValue() 函数将从 var start to end
动画化该值。(在第一个函数中定义了 var。)但问题是该值没有在单击表单按钮时设置动画
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="contact" action="" method="post">
<fieldset>
<font class="label">How many people do you want to save per month? </font> <input placeholder="" id="active-member" type="text" style="width:110px;float: right;"/>
</fieldset>
<fieldset>
<button name="submit" type="button" id="contact-submit" onclick="myCalculator();" style="float: right;">Calculate</button>
</fieldset>
</form>
<div class="container2" style="display:none;">
Animating Value <span id="value" ></span>
</div>
<script>
function myCalculator() {
$(".container2").show();
var start = 1000;
var end = 23600191;
animateValue("value", start, end, 1000);
}
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);
}
</script>
注意:
- animateValue 函数未采用
var start and end
的值
- 2000 是 2 秒
- myCalculate 函数计算一些值
- animateValue 函数将为值设置动画
最佳答案
这个问题似乎是因为如果你有一个不同于 1 的增量值,那么如果 increment
不划分 range
, 你会超过 end
并且循环永远不会停止。因此,如果您将增量值设置为 2,则以下内容将不起作用
animateValue("value", 1, 2000, 2000);
因为 2 不除 range
即在这种情况下为 1999,但以下将起作用
animateValue("value", 1, 2001, 2000);
因为范围是 2000 并且可以被 increment
整除.看到这个 fiddle https://jsfiddle.net/e1xd4ru1/3/
要解决这个问题,您可以更改循环退出条件以检查是否 current >= end
对于增量的正值和 current <= end
对于增量的负值。
希望这能回答您的问题。
关于javascript - javascript 中整数值类型的动画创建问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48278402/