# [CountUpJs](https://github.com/inorganik/countUp.js)

### 描述
CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way.
> CountUp.js 是一個無依賴的羽量級 Javascript 類，可用於快速創建以更有趣的方式顯示數值數據的動畫。

### 官方DEMO
Or tinker with CountUp in [Stackblitz](https://stackblitz.com/edit/countup-typescript?file=index.ts)

### 使用方法

const 自定義變數 =  new CountUp('targetId', endVal , options)

### 基本操作方法
* .start()
執行動畫
* .update()
更新數字
* .pauseResume()
暫停/播放
* .reset()
重設

### 父元件引入

<template>
<CountUpView :startVal="0" :countUpVal="cassinoCarouselAmount" :countUpOptions="options" />
</template>

<script setup>
/* 累計獎金計算，以 時間戳 計算金額 */
const cassinoCarouselAmount = ref(0);
const updateCarouselAmount = () => {
  /* 
      取當下 UAT 時間戳(秒)，前2-12 位數字 * 0.13 /100
      EX: 當前時間戳(秒) : 1708048762618
      0804876261 * 0.13 / 100 
      畫面顯示 : 1,046,339.1393
   */
  let ans = Number(String(Date.now()).slice(2, 12)) * 0.13 / 100
  if (ans >= 5999909.09) { cassinoCarouselAmount.value = 5999909.09 } else {
    cassinoCarouselAmount.value = ans;
  }
}
/* CountUpJs 參數設定  */
const options = {
  decimalPlaces: 2, // 顯示小數點位
  duration: 0.5, // 過渡動畫時間
};

onBeforeMount(async () => {
  // JACKPOT 獎金累積
  updateCarouselAmount();
  // 設置定時器
  setInterval(updateCarouselAmount, 4700);
});

</script>

### CountUp 子元件

<template>
  <p id="countUpContainer"></p>
</template>
<script setup>
import { CountUp } from "countup.js";
import { onMounted, ref, watch } from "vue";
/* 父組件傳入的值 */
const props = defineProps({
  countUpVal: {
    type: Number,
    default: 0,
  },
  countUpOptions: {
    type: Object,
  },
  startVal: {
    type: Number,
    default: 0
  }
})
/* 放入要實現動畫的DOM元素並實例化 */
const countUpContainer = ref()

// 更新數字
watch(() => props.countUpVal,
  (newVal) => {
    countUpContainer.value.update(newVal)
  })

// 更改選項設定，需重新實例化
watch(() => props.countUpOptions,
  () => {
    let options = { ...props.countUpOptions }
    countUpContainer.value = new CountUp('countUpContainer', props.countUpVal, options)
    countUpContainer.value.start()
  })

/* 初始化設定 */
const countUpInit = () => {
  let options = { ...props.countUpOptions }
  // 參數 new CountUp('targetId', endVal , options)
  countUpContainer.value = new CountUp('countUpContainer', props.startVal, options)
  countUpContainer.value.start()
}

onMounted(() => {
  countUpInit()
})

</script>
<!-- CSS 請使用 :deep() 更改 -->