滚动数字数字

最新推荐文章于 2024-07-21 19:13:42 发布

dongsdh

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量150

点赞数

分类专栏：微码文章标签： css html 前端

原文链接：https://blog.csdn.net/m0_52040370/article/details/127258039?spm=1001.2100.3001.7377&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-5-127258039-null-null.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-c

版权

微码专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="counter" data-set="100.6"></div>
  <div class="counter" data-set="10005744"></div>
  <div class="counter" data-set="8989"></div>
  <script>
    let counters = document.querySelectorAll('.counter')  //获取到三个counter盒子

    counters.forEach(item => {
      item.innerText = '0'  //记录分数变化的变量，初始值为0

      const updateData = () => {
        const data = +item.getAttribute('data-set')  //获取到元素中绑定的数据
        const tmp = +item.innerText //临时变量保存变化一次的数据量

        const changeData = data / 200  //设置改变的速率

        if (tmp < data) {  //如果临时变量的值小于最终数据的值，那么就给元素进行数据相加
          item.innerText = `${Math.ceil(tmp + changeData)}`  //值数相加，然后进行取整
          setTimeout(updateData, 1)  //定时器传入回调函数目的在于动态变化
        } else {
          item.innerText = data  //不满足条件后，证明得到了最终数据，直接渲染
        }

      }
      updateData()  //调用函数，启动函数
    })
  </script>
</body>

</html>