考虑到工作时间的精准倒计时器：创建、更新和使用指南

vue.js

2024-03-26 06:35:17

考虑到工作时间的精准倒计时器

前言

传统倒计时器虽然好用，但它们并不会考虑工作时间，这可能会导致截止日期计算不准确。本文将指导你如何创建一个考虑到工作时间的倒计时器，以获得更实际的截止日期。

创建倒计时器

1. 计算截止日期

首先，你需要计算截止日期。这是通过从开始日期和时间中减去非工作时间来完成的。非工作时间包括工作时间外的所有时间，例如下班后和周末。

2. 更新截止日期

接下来，你需要定期更新截止日期，以反映非工作时间的变化。可以使用 JavaScript 的 setInterval() 方法来检查当前时间，并在非工作时间内暂停倒计时。

3. 显示倒计时

最后，你需要在用户界面上显示倒计时。可以使用 HTML 和 CSS 创建一个简单的倒计时显示，也可以使用 JavaScript 库，例如 moment.js。

代码示例

以下是一个使用 Vue.js 和 moment.js 创建考虑到工作时间的倒计时器的代码示例：

new Vue({
  el: '#app',
  data() {
    return {
      startDate: moment(), // 开始日期和时间
      endDate: moment(), // 截止日期
      workingHours: {
        start: 9, // 开始工作时间
        end: 18, // 结束工作时间
      },
      isWorkingHours: true, // 工作时间内标记
    };
  },
  computed: {
    remainingTime() {
      if (this.isWorkingHours) {
        return moment.duration(this.endDate.diff(this.startDate));
      } else {
        return moment.duration(0);
      }
    },
  },
  watch: {
    startDate(newDate) {
      this.calculateEndDate();
    },
    workingHours(newHours) {
      this.calculateEndDate();
    },
  },
  methods: {
    calculateEndDate() {
      let nonWorkingHours = 0;

      // 计算开始日期的非工作小时数
      if (this.startDate.hour() < this.workingHours.start) {
        nonWorkingHours += this.workingHours.start - this.startDate.hour();
      }

      // 计算截止日期的非工作小时数
      if (this.endDate.hour() > this.workingHours.end) {
        nonWorkingHours += this.endDate.hour() - this.workingHours.end;
      }

      // 调整截止日期以考虑非工作时间
      this.endDate = this.endDate.add(nonWorkingHours, 'hours');
    },
    updateWorkingHours() {
      // 根据当前时间更新工作时间内标记
      this.isWorkingHours =
        this.startDate.hour() >= this.workingHours.start &&
        this.startDate.hour() < this.workingHours.end;
    },
    setInterval() {
      // 定期更新工作时间内标记
      setInterval(() => {
        this.updateWorkingHours();
      }, 1000);
    },
  },
  mounted() {
    // 计算初始截止日期
    this.calculateEndDate();

    // 设置定时器来更新工作时间内标记
    this.setInterval();
  },
});