js实现数字累加效果

最新推荐文章于 2023-06-14 16:07:19 发布

薛文诚

最新推荐文章于 2023-06-14 16:07:19 发布

阅读量1.9k

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/dongbangjun007/article/details/120492664

版权

实现原理：setInterval

每一个时间间隔加一，直到指定数值。

简单实现，体验上数值请小于1000

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>change</title>
</head>

<body>
  <input type="number" placeholder="请输入数字">
  <button onclick="btn()">确定</button>
  <h3>
    0
  </h3>
  <script>
    function btn() {
      let inputValue = document.getElementsByTagName('input')[0].value;
      let dom = document.getElementsByTagName('h3');
      if (inputValue <= 0) {
        alert('请输入数字');
      };

      let setChange = setInterval(() => {
        if (dom[0].innerText >= parseInt(inputValue)) {
          clearInterval(setChange);
          return;
        } else {
          dom[0].innerText = parseInt(dom[0].innerText) + 1;
        }
      }, 50);

    }

  </script>
</body>

</html>

薛文诚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现数字累加效果

实现原理：setInterval每一个时间间隔加一，直到指定数值。简单实现，体验上数值请小于1000<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
复制链接

扫一扫