console 命令行工具 X clear

console

const counters = document.querySelectorAll('.counter');

// 定时器方法
// counters.forEach(counter => {
//   const target = counter.getAttribute('data-target');
//   let i = 0;
//   const timer = setInterval(() => {
//     const increment = parseInt(target / 50);
//     i += increment;
//     counter.textContent = i;
//     if (i >= Number(target)) {
//       clearInterval(timer);
//       counter.textContent = target;
//     }
//   }, 17);
// })

// requestAnimationFrame
counters.forEach(counter => {
  const target = counter.getAttribute('data-target');
  const increment = parseInt(target / 50);
  let i = 0;
  const counterPlus = () => {
    i += increment;
    counter.textContent = i;
    if (i<target) {
      requestAnimationFrame(counterPlus);
    } else {
      counter.textContent = target;
    }
  }
  requestAnimationFrame(counterPlus);
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="//at.alicdn.com/t/font_2989232_68kjyq6l7bo.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <title>Increment Counter</title>
  </head>
  <body>
    <!-- 请忽略 -->
    <div class="jiaqicoder">
      <img src="https://gitee.com/zyxbj/image-warehouse/raw/master/pics/pic.png" alt="">
    </div>
    <!-- 请忽略 -->
    <div class="counter-container">
      <i class="iconfont icon-weibo1"></i>
      <div class="counter" data-target="12200">0</div>
      <span>微博粉丝数</span>
    </div>

    <div class="counter-container">
      <i class="iconfont icon-bilibili-fill"></i>
      <div class="counter" data-target="14310">0</div>
      <span>B站订阅数</span>
    </div>

    <div class="counter-container">
      <i class="iconfont icon-douyin"></i>
      <div class="counter" data-target="12345">0</div>
      <span>抖音粉丝数</span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color:#8e44ad;
  color: white;
  gap: 100px;
}

.counter-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.counter-container i{
  font-size: 68px;
}

.counter-container .counter{
  font-size: 48px;
  letter-spacing: 3px;
  font-weight: bold;
}

.counter-container span{
  font-size: 20px;
  letter-spacing: 5px;
}

/* 请忽略 */
.jiaqicoder{
  position: absolute;
  left: 20px;
  top: 20px;
}
.jiaqicoder img{
  width: 200px;

}
/* 请忽略 */