# JQ数字增加动画示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字增加动画示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>数字增加动画示例</h1>
<p>点击下面的按钮开始动画：</p>
<button id="start">开始动画</button>
<p id="count">0</p>
<script>
$(document).ready(function() {
$('#start').on('click', function() {
// 获取当前数字
var count = parseInt($('#count').text(), 10);
// 设置目标数字
var target = count + 100;
// 计算每一步的增量
var step = Math.ceil((target - count) / 50);
// 设置动画效果
$('#count').animate({
num: target
}, {
duration: 2000,
step: function(now, fx) {
// 每一步更新数字显示
$(this).text(Math.ceil(now));
}
});
});
});
</script>
</body>
</html>