MessageBoard-3520/resources/js/src/views/SecondPage.vue

<template>
  <b-card title="YuGiOh">
    <b-card-text>YuGiOh LP模擬</b-card-text>
    <div>
      <B-Button @click="countDown()" variant="info">歸零</B-Button>
      <B-Button @click="reset()" variant="primary">重置</B-Button>
      <div class="container">
        <img src="/LP.png" style="width:200px;">
        <div class="centered">{{ animatedNumber }}</div>
      </div>
    </div>
  </b-card>



</template>
<script>
import { BCard, BCardText,BButton } from 'bootstrap-vue'
// const sound = require("@/assets/hp.mp3");
export default {
  components: {
    BCard,
    BCardText,
    BButton,
  },
  data() {
    return {
      tweenedNumber: 5800,
      number: 5800,
    }
  },
  computed: {
    animatedNumber: function () {
      return this.tweenedNumber.toFixed(0);
    }
  },
  methods:{
    countDown(){
      this.number = 0;
    },
    reset(){ 
      this.number = 5800;
    }  
  },
  watch: {
    number: function (newValue) {
      const path = "/hp.mp3";
      const audio = new Audio(path);
      var playPromise = audio.play();
      if (playPromise !== undefined) {
        playPromise.then(_ => {
          gsap.to(this.$data, { duration: 1.6, tweenedNumber: newValue });
        })
          .catch(error => {
            console.log(`playSound error: ${error}`);
          });
      }

    }
  }
}

</script>

<style>
.container {
  position: relative;
  text-align: center;
  font-size: 48px;
  font-family: serif;
  font-style: italic;
}

.centered {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, #E5DDDB, #9A8B76, #7F723E);
  background-clip: text;
  -webkit-background-clip: text;
  text-stroke: 1px #3A3230;
  -webkit-text-stroke: 1px #3A3230;
  text-align: right;
  color: transparent;
  width:100px;
}
</style>