countup.js實現(xiàn)數(shù)字動態(tài)疊加效果

更新時間：2019年10月17日 15:50:04 作者：馬優(yōu)晨

這篇文章主要為大家詳細介紹了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果的具體代碼，供大家參考，具體內(nèi)容如下

CountUp.js 無依賴的、輕量級的 JavaScript 類，可以用來快速創(chuàng)建以一種更有趣的動畫方式顯示數(shù)值數(shù)據(jù)。盡管它的名字叫 countUp，但其實可以在兩個方向進行變化，這是根據(jù)你傳遞的 startVal 和 endVal 參數(shù)判斷的。再加上滾輪事件判斷。

可配置的參數(shù)：

target = 目標元素的 ID；
startVal = 開始值；
endVal = 結(jié)束值；
decimals = 小數(shù)位數(shù)，默認值是0；
duration = 動畫延遲秒數(shù)，默認值是2；

舉例：

var options = {

  useEasing: true, 
  useGrouping: true, 
  separator: ',', 
  decimal: '.', 
};
var demo = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
console.error(demo.error);

安裝：

npm i countup.js

在vue中使用：

<template>
 <h1><span
 ref='countup'
 class="text"
 ></span>
 </h1>
</template>

<script>
import { CountUp } from 'countup.js'
export default {
 name: 'Countup',
 data () {
 return {
 options: {
 startVal: 1000
 },
 endCount: 2019
 }
 },
 mounted () {
 this.initCountUp()
 },
 methods: {
 initCountUp () {
 let demo = new CountUp(this.$refs.countup, this.endCount, this.options)
 if (!demo.error) {
 demo.start()
 } else {
 console.error(demo.error)
 }
 }
 }
}
</script>

<style lang="less" scoped>
.text {
 color: #4d63bc;
 font-size: 16px;
}
</style>

演示地址：countUp.js

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

您可能感興趣的文章:

相關(guān)文章

Javascript+CSS3實現(xiàn)進度條效果
本篇文章主要介紹Javascript+CSS3實現(xiàn)進度條效果，可以實現(xiàn)給用戶一個等待的過程，有需要的可以了解一下。
2016-10-10
前端使用crypto.js進行加密的函數(shù)代碼
最近在使用Cookies加密保存數(shù)據(jù)的時候，接觸到crypto，使用還算簡單，在這里記錄一下
2020-08-08
使用three.js實現(xiàn)炫酷的酸性風(fēng)格3D頁面效果
本文內(nèi)容主要介紹，通過使用React+three.js技術(shù)棧，加載3D模型、添加3D文字、增加動畫、點擊交互等，配合樣式設(shè)計，實現(xiàn)充滿設(shè)計感的酸性風(fēng)格頁面
2021-10-10
JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
javascript mouseover、mouseout停止事件冒泡的解決方案
停止事件冒泡在各瀏覽器中已經(jīng)有相應(yīng)的解決方案，但是對于mouseover和mouseout卻顯得力不從心。
2009-04-04
BootStrap入門教程(一)之可視化布局
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-09-09
JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法
這篇文章主要介紹了JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法，JSON是JavaScript表達值和對象的通用數(shù)據(jù)格式，其本質(zhì)就是符合一定規(guī)范的字符串
2022-07-07
javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼
這篇文章主要介紹了javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼,需要的朋友可以參考下
2014-09-09
前端數(shù)組去重面試我會問這3個小問題
數(shù)組去重在我們的前端的面試過程中經(jīng)過會遇到,有一些人可能會想到一兩種,但是數(shù)據(jù)去重的算法真的太多了,下面這篇文章主要給大家介紹了關(guān)于前端數(shù)組去重面試3個小問題的相關(guān)資料,需要的朋友可以參考下
2023-01-01
使用weixin-java-miniapp配置進行單個小程序的配置詳解
這篇文章主要介紹了使用weixin-java-miniapp配置進行單個小程序的配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03