countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
更新時間：2019年10月17日 16:02:06 作者：lifangfang0607
這篇文章主要為大家詳細介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了countUp.js實現(xiàn)數(shù)字動態(tài)變化的具體代碼，供大家參考，具體內(nèi)容如下
countUp.js官網(wǎng)：演示地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)字增長效果</title>
</head>
<body>
<h1 id="num1"></h1>
<h1 id="num2"></h1>
<h1 id="num3"></h1>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<script type="text/javascript">
var options = {
useEasing: true, // 使用緩和
useGrouping: true, // 使用分組(是否顯示千位分隔符,一般為 true)
separator: ',', // 分隔器(千位分隔符,默認為',')
decimal: '.', // 十進制(小數(shù)點符號,默認為 '.')
prefix: '', // 字首(數(shù)字的前綴,根據(jù)需要可設(shè)為 $,¥,￥ 等)
suffix: '' // 后綴(數(shù)字的后綴 ,根據(jù)需要可設(shè)為 元,個,美元 等)
};
// CountUp(參數(shù)一, 參數(shù)二, 參數(shù)三, 參數(shù)四, 參數(shù)五, 參數(shù)六)
// 參數(shù)一: 數(shù)字所在容器
// 參數(shù)二: 數(shù)字開始增長前的默認值(起始值),一般從 0 開始增長
// 參數(shù)三: 數(shù)字增長后的最終值,該值一般通過異步請求獲取
// 參數(shù)四: 數(shù)字小數(shù)點后保留的位數(shù)
// 參數(shù)五: 數(shù)字增長特效的時間,此處為3秒
// 參數(shù)六: 其他配置項
// 注: 參數(shù)六也可不加,其配置項則為默認值
new CountUp("num1", 0, 1380, 0, 3, options).start();
new CountUp("num2", 0, 1380, 2, 3, options).start();
new CountUp("num3", 0, 1380, 4, 3, options).start();
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要是對js中浮點型運算的問題進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了微信小程序之高德地圖多點路線規(guī)劃過程示例詳解,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
zTree插件之單選下拉菜單實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript 另類遍歷數(shù)組實現(xiàn)代碼
JavaScript 另類遍歷數(shù)組實現(xiàn)代碼，大家可以看下。2009-10-10
ant design下運用js實現(xiàn)框選功能，這篇文章主要介紹了ant design實現(xiàn)圈選功能,本文通過實例代碼截圖的形式給大家介紹的非常詳細，需要的朋友可以參考下2019-12-12
JS頁面獲取 session 值，作用域和閉包學(xué)習(xí)筆記
這篇文章主要介紹了JS頁面獲取 session 值，作用域和閉包,結(jié)合具體實例形式分析了javascript與jsp交互獲取session值、函數(shù)作用域及閉包相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
js按條件生成隨機json:randomjson實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s按條件生成隨機json:randomjson實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本篇文章給大家分享了關(guān)于JS函數(shù)中stack size計算方法的相關(guān)知識點，對此有需要的朋友可以跟著學(xué)習(xí)下。2018-06-06
Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(2)
這篇文章主要為大家詳細介紹了Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計，感興趣的小伙伴們可以參考一下2016-06-06
javascript中兼容主流瀏覽器的動態(tài)生成iframe方法
這篇文章主要介紹了javascript中兼容主流瀏覽器的動態(tài)生成iframe方法,需要的朋友可以參考下2014-05-05