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)變化的具體代碼，供大家參考，具體內容如下
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ù)需要可設為 $,¥,￥ 等)
suffix: '' // 后綴(數(shù)字的后綴 ,根據(jù)需要可設為 元,個,美元 等)
};
// 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了javascript如何返回字符串的所有排列問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
layui 實現(xiàn)自動選擇radio單選框(checked)的方法
今天小編就為大家分享一篇layui 實現(xiàn)自動選擇radio單選框(checked)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了PHP抓取HTTPS內容的實現(xiàn)方法，以及在抓取的時候遇到的一個HTTPS問題的處理辦法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
JavaScript?中處理?null和?undefined的常見方法
文章介紹了可選鏈操作符（?.）和空值合并操作符（??）的使用方法,并對比了它們與邏輯非運算符（!）的區(qū)別,還討論了使用寬松比較運算符（==）和自定義函數(shù)來優(yōu)化判斷的幾種方法,以提高代碼的可讀性和性能,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要給大家介紹了關于利用JS、CSS實現(xiàn)列表自動滑動滾動效果的相關資料,本人在項目中遇到這樣的需求,親自來做的,通過html頁面配合js,css來做出的列表自動滑動,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了IE8中jQuery.load()加載頁面不顯示的原因，在文中給大家介紹了jquery中l(wèi)oad()方法的使用要點,需要的朋友可以參考下2018-11-11
網(wǎng)頁上可以自由改變字體大小是個非常有助于用戶體驗的小功能，現(xiàn)在許多網(wǎng)站上都有此功能，今天我們來簡單實現(xiàn)下。2015-04-04
js遍歷table的所有元素的代碼，方便我們控制table的所有元素，顏色，樣式等2008-07-07
第四篇Bootstrap網(wǎng)格系統(tǒng)偏移列和嵌套列
這篇文章主要介紹了Bootstrap網(wǎng)格系統(tǒng)偏移列和嵌套列的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
ES6中Array.copyWithin()函數(shù)的用法實例詳解
ES6為Array增加了copyWithin函數(shù)，用于操作當前數(shù)組自身，用來把某些個位置的元素復制并覆蓋到其他位置上去。下面重點給大家介紹ES6中Array.copyWithin()函數(shù)的用法，需要的朋友參考下2017-09-09