js实现数字跳动到指定数字代码

#麻辣小龙虾#

已于 2023-04-17 18:34:54 修改

阅读量4.3k

点赞数 5

分类专栏： javascript 文章标签： javascript 前端 html

于 2019-08-15 17:30:35 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/99646065

版权

javascript 专栏收录该内容

90 篇文章 1 订阅

订阅专栏

运行结果如下：

<!DOCTYPE html>
  <head>
    <title>js实现数字跳动到指定数字</title>
    <style>
      h1 {font-size: 150px;text-align:center;}
      p {text-align:center;}
      button {font-size:40px;}
    </style>
  </head>
  <body>
    <h1 id="number">0</h1>
    <p>
      <button onclick="start()">开始计数</button>
    </p>
  </body>
  <script>
    /*
    * startNum  代表要跳动的初始数字
    * targetNum 代表要跳动到的数字
    * time      代表要跳动需要花费的时间
    * selector  代表要跳动元素的选择器
    */
    const $setJumpNumber = (startNum, targetNum, time = 1, selector) => {
      let dom = document.querySelector(selector);
      let originNum = startNum;
      let stepNum = 0;
      let timeNum = time; 
      dom.innerHTML = startNum;

      let timeId = setInterval(() => {
        if (originNum < targetNum) {
          timeNum -= 0.001;
          let strNum = originNum.toString();
          // 数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字，所有后三位数随机跳动的方式进行模拟生成
          if (targetNum.toString().length < 6) {
            stepNum += 1; // 这样才可以实现越跳越快的效果
            originNum = originNum + stepNum;
            dom.innerHTML = originNum;
          } else {
            stepNum += 500; // 这样才可以实现越跳越快的效果
            originNum = originNum + stepNum;
            dom.innerHTML = strNum.substr(0, strNum.length - 3) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10);
          }
        } else {
          dom.innerHTML = targetNum;
          clearInterval(timeId);
        }
      }, timeNum);
    };

    function start () {
      $setJumpNumber(11, 218983423, 1, 'h1');
    };
    
  </script>
</html>

#麻辣小龙虾#

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
js实现数字跳动到指定数字代码

运行结果如下：<!DOCTYPE html> <head> <title>js实现数字跳动到指定数字</title> <style> h1 {font-size: 150px;text-align:center;} p {text-align:center;} but...
复制链接

扫一扫