JavaScript给指定dom里面添加一个动态递增的数字

生净末旦你

已于 2024-07-18 11:11:24 修改

阅读量206

点赞数

文章标签： javascript 前端 html

于 2023-05-11 10:47:06 首次发布

本文链接：https://blog.youkuaiyun.com/wx13699645464/article/details/130616620

版权

该代码定义了一个名为`increasingNumberAnimation`的函数，用于在指定的DOM元素上创建一个数值增加的动画效果。函数接受参数包括选择器、初始值、结束值、步长和持续时间。当数值达到结束值时，动画停止。注意，由于`setInterval`的时间间隔最小为10ms，因此数值变化太快可能导致动画不明显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

/**
 * 数字动态变化
 * @param {string} selector 选择器
 * @param {number} start 初始值 
 * @param {number} end 结束值 
 * @param {number} step 步长默认1
 * @param {number} duration 执行时长，单位ms，默认2000ms 
 * @returns {NodeJS.Timeout} 返回定时器
 */
export const increasingNumberAnimation = (selector: string, start: number, end: number, step: number = 1, duration: number = 2000): NodeJS.Timeout => {
  let current: number = start;
  const increment = end > start ? step : -step;

  const timer = setInterval(() => {
    current += increment;
    const element: HTMLElement | null = document.querySelector(selector);
    if (element) {
      element.innerHTML = current.toString();
    }

    if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
      clearInterval(timer);
      if (element) {
        element.innerHTML = end.toString();
      }
    }
  }, Math.abs(Math.floor(duration / ((end - start) / Math.abs(step)))));

  return timer;
};

使用说明：

seletor：dom容器如：#my-id .my-class

start：初始值

end：结束值

step：步长，默认1

duration：执行时长，单位ms，默认2000ms

注意事项：

HTML5新标准定时器最小执行时长为4ms，不同浏览器还有差异，请根据自己具体需求调整步长和执行时长，如果起始值与结束值相差太大，且步长过短，时间过短可能会使功能无效