如何通过每秒增加值来制作动画数字
How do I do animated number by adding value each second
如何通过每秒增加值来制作动画数字。就像在这个插件中
http://aishek.github.io/jquery-animateNumber
Html
<div class="earned">171655.10457862</div>
这是jQuery代码
var DOGEbal = 171655.10457862;
var per_second = 1.56948984;
interval = setInterval(function(){
DOGEbal += per_second;
DOGEbalStack = DOGEbal.toString();
DOGEbalStack = DOGEbalStack.slice(0, (DOGEbalStack.indexOf("."))+9);
$(".earned").html(DOGEbalStack);
}, 1000);
所以我想制作添加 per_second
到 .earned
的数字动画。像在 animateNumber 插件中一样每秒这样做
这里是 https://jsfiddle.net/uzd83qw6/1/ 例子。如何为该示例制作动画?
您可以将 "per second step" 转换为 "per millisecond" 延迟:
function animate($target, fromValue, incrementPerSecond) {
var incrementPerMillisecond = incrementPerSecond / 1000;
var currentValue = fromValue;
$target.text(currentValue);
setInterval(function () {
$target.text((currentValue + incrementPerMillisecond).toFixed(8));
currentValue += incrementPerMillisecond;
}, 1);
}
animate($('.earned'), 171655.10457862, 1.56948984);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="earned"></div>
如何通过每秒增加值来制作动画数字。就像在这个插件中 http://aishek.github.io/jquery-animateNumber
Html
<div class="earned">171655.10457862</div>
这是jQuery代码
var DOGEbal = 171655.10457862;
var per_second = 1.56948984;
interval = setInterval(function(){
DOGEbal += per_second;
DOGEbalStack = DOGEbal.toString();
DOGEbalStack = DOGEbalStack.slice(0, (DOGEbalStack.indexOf("."))+9);
$(".earned").html(DOGEbalStack);
}, 1000);
所以我想制作添加 per_second
到 .earned
的数字动画。像在 animateNumber 插件中一样每秒这样做
这里是 https://jsfiddle.net/uzd83qw6/1/ 例子。如何为该示例制作动画?
您可以将 "per second step" 转换为 "per millisecond" 延迟:
function animate($target, fromValue, incrementPerSecond) {
var incrementPerMillisecond = incrementPerSecond / 1000;
var currentValue = fromValue;
$target.text(currentValue);
setInterval(function () {
$target.text((currentValue + incrementPerMillisecond).toFixed(8));
currentValue += incrementPerMillisecond;
}, 1);
}
animate($('.earned'), 171655.10457862, 1.56948984);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="earned"></div>