js實現(xiàn)數(shù)字跳動到指定數(shù)字
更新時間：2020年08月25日 10:46:26 作者：#麻辣小龍蝦#
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)字跳動到指定數(shù)字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)到最對應的數(shù)字，所有后三位數(shù)隨機跳動的方式進行模擬生成
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了JS實現(xiàn)簡單的圖書館享元模式,以一個圖書館存書借書的例子分析了圖書館享元模式的實現(xiàn)技巧,需要的朋友可以參考下2015-06-06
本文重點給大家介紹js判斷json對象是否為空的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧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)打交道，畢竟這是遍歷必不可少的工具之一。然而當循環(huán)次數(shù)比較大時，效率問題必須重視。下面這篇文章就主要介紹了JavaScript中幾種for循環(huán)的寫法與效率,需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)的相關資料,需要的朋友可以參考下2016-05-05
這篇文章給大家介紹了Electron 怎么將網(wǎng)頁打包成桌面應用（web前端頁面怎么生成exe可執(zhí)行文件），感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02
javascript HTML5 canvas實現(xiàn)打磚塊游戲
這篇文章主要介紹了基于javascript HTML5 canvas實現(xiàn)打磚塊游戲的具體實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
在javascript前端開發(fā)中js函數(shù)問題經(jīng)常會被討論，這個問題仁者見仁智者見智，下面通過示例代碼給大家介紹js五大常見函數(shù)，感興趣的朋友一起看看吧2018-03-03
主頁面A 怎么向 iframe B 傳遞數(shù)據(jù)呢？iframe B 怎么向 主頁面A 傳遞數(shù)據(jù)，下面有不錯的實現(xiàn)思路，感興趣的朋友可以了解下2013-12-12
document.selection.createRange方法與實例
document.selection.createRange() 根據(jù)當前文字選擇返回 TextRange 對象，或根據(jù)控件選擇返回 ControlRange 對象2006-10-10