CountUp.js數(shù)字滾動插件使用方法詳解
更新時間：2019年10月17日 16:55:49 作者：bocaidada
這篇文章主要為大家詳細介紹了CountUp.js數(shù)字滾動插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
CountUp.js 是一個輕量級，無依賴的JavaScript類，通過簡單的設(shè)置就可以達到數(shù)字滾動的效果
演示地址： countUp.js
可配置項：
target = 目標元素的 ID；
startVal = 開始值；
endVal = 結(jié)束值；
decimals = 小數(shù)位數(shù)，默認值是0；
duration = 動畫延遲秒數(shù)，默認值是2；
//用法：
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
}
var demo = new CountUp(target , startVal, endVal , decimals , duration , options);
demo.start();
相關(guān)代碼實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<script type="text/javascript">
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
var demo = new CountUp('box', 0, 4068, 0, 2.5, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ie8 不支持new Date(2012-11-10)問題的解決方法
使用JS的時候也碰到了如下問題，后來經(jīng)過修改，在IE8環(huán)境里，下面的代碼是可用的，下面與大家分享下ie8 不支持new Date的解決方法，有類似問題的朋友可以參考下2013-07-07
收集不同瀏覽器的怪癖，對于大家以后的開發(fā)與兼容性問題，有所幫助。2010-07-07
這篇文章主要介紹了js與css實現(xiàn)彈出層覆蓋整個頁面的方法,分別以實例形式展示了彈出層覆蓋整個頁面的css樣式與js控制的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2014-12-12
關(guān)于layui toolbar和template的結(jié)合使用方法
今天小編就為大家分享一篇關(guān)于layui toolbar和template的結(jié)合使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
生成map對象的方法或許會有很多，在本文將為大家詳細介紹下使用js是如何做到的，感興趣的朋友不要錯過2014-01-01
JavaScript判斷訪問的來源是手機還是電腦,用的哪種瀏覽器
這篇文章主要介紹了使用JavaScript判斷訪問的來源是手機還是電腦,用的哪種瀏覽器。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
bootstrap校驗laydate起止日期聯(lián)動失效問題及解決方法
這篇文章主要介紹了bootstrap校驗laydate起止日期聯(lián)動失效問題,項目中用到bootstrapValidator，以及l(fā)aydate（by:賢心，插件效果美觀），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)貪吃蛇游戲，canvas繪制地圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了如何用CocosCreator制作微信小游戲，從下載工具到配置，最后連接微信小游戲預覽，一步步很詳細，希望讀者們仔細看一下2021-04-04
這篇文章主要介紹了小程序紅包雨的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02