前端 JS 经典：数字变化动画

1. 需求

给你一个数字，当这个数字变化时，有一个动画的过渡效果。

2. 思路

首先我们要知道两个数字变化需要多少秒，然后变化的范围，算出变化的速度。记住开始变化的时间，然后通过 requestAnimationFrame 函数，确定事件下一帧执行。

3. 效果

4. 代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style></style></head><body><button class="btn">打折</button><label>价格：4599.00</label><script>const label = document.querySelector("label");const btn = document.querySelector(".btn");function animation(duration, from, to, callback) {let value = from;const speed = (to - from) / duration;const start = Date.now();function _run() {const t = Date.now() - start;if (t >= duration) {value = to;callback(value);return;}value = from + t * speed;callback(value);requestAnimationFrame(_run);}_run();}btn.onclick = function () {animation(2000, 4599, 30, (value) => {label.textContent = `价格：${value.toFixed(2)}`;});};</script></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/30422.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！