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

代码：

/**
 * 数字动态变化
 * @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，不同浏览器还有差异，请根据自己具体需求调整步长和执行时长，如果起始值与结束值相差太大，且步长过短，时间过短可能会使功能无效