🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

浏览器 - 计数器 (advanced)

2019-10-25

描述

根据特定的范围、步骤和持续时间在指定的选择器上创建一个计数器。

提示

  • 检查 step 是否符合要求,并进行相应的修改
  • setInterval() 中使用 Math.abs()Math.floor() 的组合来对每一次绘制计数器的间隔时间进行计算
  • 使用 document.querySelector().innerHTML 来更新选中元素的值
  • 第四个参数 step 的默认值为 1
  • 第五个参数 duration 使用的默认值为 2000ms

代码

const counter = (selector, start, end, step = 1, duration = 2000) => {
  let current = start,
    _step = (end - start) * step < 0 ? -step : step,
    timer = setInterval(() => {
      current += _step;
      document.querySelector(selector).innerHTML = current;
      if (current >= end) document.querySelector(selector).innerHTML = end;
      if (current >= end) clearInterval(timer);
    }, Math.abs(Math.floor(duration / (end - start))));
  return timer;
};

示例

id="my-id" 的元素创建一个 2 秒的计时器:

counter('#my-id', 1, 1000, 5, 2000);

返回总目录

每天 30 秒系列之 JavaScript 代码


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步