倒计时在给定时间内从n到0，负结束值
倒计时在给定时间内从n到0，负结束值
提问于 2018-05-09 07:30:08
我正在编写一个简单的脚本，它应该将给定的值(例如6345.23)动画为0，通过对其进行计数，如果经过指定的时间(例如2 seconds )，它也应该在0结束。
我从简单的逻辑开始：
- 给定配置：
initial value、time in sec、interval - 时间以秒为单位，因此将其转换为毫秒。
- 用ms中的时间除以间隔来计算蜱数
- 用初始值除以蜱数来计算每条蜱的递减值。
一旦了解了上面的内容，我们就可以简单地做：(简单的模型，而不是实际的代码)
intId = setInterval(function() {
if(ticks_made === amount_of_ticks) {
clearInterval(intId);
} else {
value -= amount_per_tick;
// update view
}
}, interval);实际代码：
var value = 212.45,
time = 2, // in seconds
interval = 20; // in milliseconds
var time_to_ms = time * 1000,
amount_of_ticks = time_to_ms / interval,
amount_per_tick = (value / amount_of_ticks).toFixed(5);
var start_time = new Date();
var ticks_made = 0;
var intId = setInterval(function() {
if(ticks_made === amount_of_ticks) {
console.log('start time', start_time);
console.log('end time', new Date());
console.log('total ticks: ', amount_of_ticks, 'decresed by tick: ', amount_per_tick);
clearInterval(intId);
} else {
value = (value - amount_per_tick).toFixed(5);
console.log('running', ticks_made, value);
}
ticks_made++;
}, interval);链接do 小提琴 (在控制台中，您可以观察它是如何工作的)
如果您将时间设置为2 (2 seconds)它的ok，但如果您将时间设置为例如2.55 (2.55 seconds)，它就不会停止在0上，它会以负值经过并无限期地进行。
我是如何修复它的，所以不管在几秒钟内设置了什么，它总是一个接一个地执行，直到达到完美的0。
var value = 212.45,
time = 2, // in seconds
interval = 20; // in milliseconds
var time_to_ms = time * 1000,
amount_of_ticks = time_to_ms / interval,
amount_per_tick = (value / amount_of_ticks).toFixed(5);
var start_time = new Date();
var ticks_made = 0;
var intId = setInterval(function() {
if(ticks_made === amount_of_ticks) {
console.log('start time', start_time);
console.log('end time', new Date());
console.log('total ticks: ', amount_of_ticks, 'decresed by tick: ', amount_per_tick);
clearInterval(intId);
} else {
value = (value - amount_per_tick).toFixed(5);
console.log('running', ticks_made, value);
}
ticks_made++;
}, interval);
Stack Overflow用户
发布于 2018-05-09 07:47:08
立即将.toFixed()的结果转换为一个数字是有意义的：
let amount_per_tick = +(value / amount_of_ticks).toFixed(5);
let value = +(value - amount_per_tick).toFixed(5);(注意+符号)
这样，您就不必担心类型强制或其他任何事情，而只需专注于数学。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50247825
复制相关文章
相似问题
腾讯云开发者
