CountUp.js數(shù)字滾動(dòng)插件使用方法詳解

更新時(shí)間：2019年10月17日 16:55:49 作者：bocaidada

這篇文章主要為大家詳細(xì)介紹了CountUp.js數(shù)字滾動(dòng)插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

CountUp.js 是一個(gè)輕量級(jí)，無(wú)依賴的JavaScript類，通過(guò)簡(jiǎn)單的設(shè)置就可以達(dá)到數(shù)字滾動(dòng)的效果

演示地址： countUp.js

可配置項(xiàng)：

target = 目標(biāo)元素的 ID；
startVal = 開(kāi)始值；
endVal = 結(jié)束值；
decimals = 小數(shù)位數(shù)，默認(rèn)值是0；
duration = 動(dòng)畫(huà)延遲秒數(shù)，默認(rèn)值是2；

//用法：
 var options = {
      useEasing: true, 
      useGrouping: true, 
      separator: ',', 
      decimal: '.', 
 }
var demo = new CountUp(target , startVal, endVal , decimals , duration , options);
demo.start();

相關(guān)代碼實(shí)例如下：

<!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>

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

您可能感興趣的文章:

相關(guān)文章

JavaScript 斐波那契數(shù)列倒序輸出輸出100以內(nèi)的質(zhì)數(shù)代碼實(shí)例
這篇文章主要介紹了JavaScript 斐波那契數(shù)列倒序輸出輸出100以內(nèi)的質(zhì)數(shù)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
游戲人文件夾程序 ver 3.0
游戲人文件夾程序 ver 3.0...
2006-07-07
在微信小程序中使用iconfont的最新圖文教程
由于微信小程序線上的資源限制了各種接口安全域名,所以在小程序里如果想使用iconfont字體圖標(biāo)就會(huì)稍有不同,下面這篇文章主要給大家介紹了關(guān)于在微信小程序中使用iconfont的相關(guān)資料,需要的朋友可以參考下
2022-08-08
理解javascript定時(shí)器中的setTimeout與setInterval
這篇文章主要幫助大家學(xué)習(xí)理解javascript定時(shí)器中的setTimeout與setInterval，從實(shí)例出發(fā)進(jìn)行深入探討，感興趣的小伙伴們可以參考一下
2016-02-02
JavaScript中的this到底是什么(一)
JavaScript中的this總是讓人迷惑，應(yīng)該是js眾所周知的坑之一。個(gè)人也覺(jué)得js中的this不是一個(gè)好的設(shè)計(jì)，由于this晚綁定的特性，它可以是全局對(duì)象，當(dāng)前對(duì)象，或者…有人甚至因?yàn)榭哟蠖挥胻his
2015-12-12
javascript自動(dòng)切換焦點(diǎn)控制效果完整實(shí)例
這篇文章主要介紹了javascript自動(dòng)切換焦點(diǎn)控制效果的方法,結(jié)合完整實(shí)例形式分析了JavaScript響應(yīng)鍵盤(pán)按鍵控制表單輸入框的焦點(diǎn)切換功能,需要的朋友可以參考下
2016-02-02
微信小程序中wxs文件的一些妙用分享
wxs相當(dāng)于一個(gè)獨(dú)立模塊,相當(dāng)于一個(gè)獨(dú)立出來(lái)的module對(duì)象,通過(guò)module.exports向外暴露,在文件中引入即可使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序中wxs文件的一些妙用,需要的朋友可以參考下
2022-01-01
JavaScript實(shí)現(xiàn)隨機(jī)數(shù)生成器（去重）
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)數(shù)生成器，生成不重復(fù)的隨機(jī)數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
js獲取滾動(dòng)距離的方法
這篇文章主要介紹了js獲取滾動(dòng)距離的方法,涉及javascript針對(duì)頁(yè)面滾動(dòng)條的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
JS簡(jiǎn)單獲取當(dāng)前日期和農(nóng)歷日期的方法
這篇文章主要介紹了JS簡(jiǎn)單獲取當(dāng)前日期和農(nóng)歷日期的方法,涉及javascript日期運(yùn)算與字符串轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04