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

运行结果如下:

<!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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值