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

1. 需求

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

2. 思路

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

3. 效果

4. 代码实现

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="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>
相关推荐
Yhame.8 分钟前
【使用层次序列构建二叉树(数据结构C)】
c语言·开发语言·数据结构
言之。14 分钟前
【Go语言】RPC 使用指南(初学者版)
开发语言·rpc·golang
小墨宝23 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED39 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿43 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子43 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
投笔丶从戎1 小时前
Kotlin Multiplatform--01:项目结构基础
android·开发语言·kotlin
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm