Vue 商城倒计时时分秒单位

我都没吃饱

已于 2023-05-13 19:10:20 修改

阅读量160

点赞数

文章标签： javascript 前端 html vue.js

于 2023-04-19 16:11:19 首次发布

本文链接：https://blog.youkuaiyun.com/Guanchong333/article/details/130246658

版权

这段代码展示了如何在Vue.js应用中创建一个倒计时器，目标时间设定为2023年4月19日20:30:59。通过JavaScript的setInterval方法更新剩余的小时、分钟和秒数，并使用formatNumber函数确保显示为两位数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是 template 标签里面的代码

<div id="app">
  <h1>倒计时：{{ hours }}小时 {{ minutes }}分钟 {{ seconds }}秒</h1>
</div>

这是js 里面的代码

<script>
export default {

  data() {
    return {
      targetTime: new Date("2023-4-19 20:30:59").getTime(),
      hours: "",
      minutes: "",
      seconds: "",
    };
  },
  mounted() {
    this.startCountdown();
  },

  methods: {
    startCountdown() {
      setInterval(() => {
        const now = new Date().getTime();
        const distance = this.targetTime - now;

        // 计算剩余时间并格式化为时分秒
        this.hours = Math.floor(distance / (1000 * 60 * 60));
        this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // 将单个数字转换为两位数的字符串格式
        this.hours = this.formatNumber(this.hours);
        this.minutes = this.formatNumber(this.minutes);
        this.seconds = this.formatNumber(this.seconds);
      }, 1000);
    },
    formatNumber(num) {
      return num < 10 ? `0${num}` : `${num}`;
    }
  }
};
</script>

下面看看长什么样吧: