在vuejs中创建一个倒计时

Question

我有一个mixin，它以这种格式返回剩余时间HH:mm:ss。

Vue.mixin({
    methods: {

    remainingTime(){

      // some calculations based on current time and given time
      return timeLeft.toString();
    }
....

在组件中，我打电话给混音器来得到时间

export default {
    ....
    data() {
        return {

           timeLeft: this.remainingTime(),
    ....

在我的模板中，我称它为{{timeLeft}，它返回类似01:20:33的值，但我想将这个值显示为倒计时。所以当它加载到页面上时，开始倒计时1秒。

我试图使用一个观察者，但它不起作用：

watch: {
        timeLeft: {
            handler(value) {
                if (value) {
                    setInterval(() => {
                        this.timeLeft;
                    }, 1000);
                }
            },
            immediate: true,
        },
    },

Answer 1

您可以使用mod（%）提取小时分钟和日期。代码取自本文底部的文章。在装载的上运行setInterval，或者在获得截止日期时间数据时运行setInterval

let countDownDate = new Date("Jan 01, 2023 00:00:00").getTime(); // The deadline
let x = setInterval(() => {
   let now = new Date().getTime();
   let distance = countDownDate - now;

   let days = Math.floor(distance / (1000 * 60 * 60 * 24));
   let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
   let seconds = Math.floor((distance % (1000 * 60)) / 1000);
   console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s"); // Countdown output
  

   if (distance < 0) {
      clearInterval(x);
      console.log("Too late!") // Text at the end of the countdown
   }
}, 1000)

你可以在这里查看https://beetrootacademy.se/blog/front-end-development/js-countdown-timer-14-lines