快捷導(dǎo)航

js實現(xiàn)數(shù)字跳動到指定數(shù)字

更新時間：2020年08月25日 10:46:26 作者：#麻辣小龍蝦#

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)數(shù)字跳動到指定數(shù)字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)數(shù)字跳動到指定數(shù)字的具體代碼，供大家參考，具體內(nèi)容如下

運行結(jié)果如下：

<!DOCTYPE html>
 <head>
 <title>js實現(xiàn)數(shù)字跳動到指定數(shù)字</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()">開始計數(shù)</button>
 </p>
 </body>
 <script>
 /*
 * startNum 代表要跳動的初始數(shù)字
 * targetNum 代表要跳動到的數(shù)字
 * 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();
   // 數(shù)字比較少的時候直接用 + 1; 數(shù)字很大直接 +1 要很久才能調(diào)到最對應(yīng)的數(shù)字，所有后三位數(shù)隨機(jī)跳動的方式進(jìn)行模擬生成
   if (targetNum.toString().length < 6) {
   stepNum += 1; // 這樣才可以實現(xiàn)越跳越快的效果
   originNum = originNum + stepNum;
   dom.innerHTML = originNum;
   } else {
   stepNum += 500; // 這樣才可以實現(xiàn)越跳越快的效果
   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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript 抽獎效果實現(xiàn)代碼數(shù)字跳動版

相關(guān)文章

JS實現(xiàn)簡單的圖書館享元模式實例
這篇文章主要介紹了JS實現(xiàn)簡單的圖書館享元模式,以一個圖書館存書借書的例子分析了圖書館享元模式的實現(xiàn)技巧,需要的朋友可以參考下
2015-06-06
JS如何判斷json是否為空
本文重點給大家介紹js判斷json對象是否為空的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-07-07
javascript提取URL的搜索字符串中的參數(shù)(自定義函數(shù)實現(xiàn))
我們經(jīng)常會看到有的頁面鏈接地址后面會跟有參數(shù),很多時候我們需要獲得這些參數(shù)的值,接下來將介紹獲取方法,感興趣的朋友可以了解系,希望本文對你有所幫助
2013-01-01
JavaScript中for循環(huán)的幾種寫法與效率總結(jié)
每個接觸JS的開發(fā)人員都不可避免的與for循環(huán)打交道，畢竟這是遍歷必不可少的工具之一。然而當(dāng)循環(huán)次數(shù)比較大時，效率問題必須重視。下面這篇文章就主要介紹了JavaScript中幾種for循環(huán)的寫法與效率,需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
Bootstrap自動適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下
2016-05-05
web前端頁面生成exe可執(zhí)行文件的方法
這篇文章給大家介紹了Electron 怎么將網(wǎng)頁打包成桌面應(yīng)用（web前端頁面怎么生成exe可執(zhí)行文件），感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-02-02
javascript HTML5 canvas實現(xiàn)打磚塊游戲
這篇文章主要介紹了基于javascript HTML5 canvas實現(xiàn)打磚塊游戲的具體實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
JavaScript 五大常見函數(shù)
在javascript前端開發(fā)中js函數(shù)問題經(jīng)常會被討論，這個問題仁者見仁智者見智，下面通過示例代碼給大家介紹js五大常見函數(shù)，感興趣的朋友一起看看吧
2018-03-03
跨域傳值即主頁面與iframe之間互相傳值
主頁面A 怎么向 iframe B 傳遞數(shù)據(jù)呢？iframe B 怎么向主頁面A 傳遞數(shù)據(jù)，下面有不錯的實現(xiàn)思路，感興趣的朋友可以了解下
2013-12-12
document.selection.createRange方法與實例
document.selection.createRange() 根據(jù)當(dāng)前文字選擇返回 TextRange 對象，或根據(jù)控件選擇返回 ControlRange 對象
2006-10-10