Question

我不太清楚这个逻辑。...我试图显示倒计时“直到业务关闭为止的时间（即：太平洋标准时间晚上7点）...。如果它通过了晚上7点，我想显示在太平洋标准时间上午10点设置“直到营业时间”计时器。

isOpen逻辑有效，但我不知道如何设置计时器倒计时。

<script>
  function getHourAtLoc(loc, date = new Date()) {
    let f = new Intl.DateTimeFormat("en", {
      hour: "2-digit",
      hour12: false,
      timeZone: loc
    });

    return f.formatToParts(date)[0].value;
  }

  let hour = getHourAtLoc("America/Los_Angeles");
  let isOpen = hour >= 10 && hour < 19;
  let total;
  let hours;
  let minutes;
  let seconds;

  function doCountDownToClose() {
    const endtime = new Date(new Date().setHours(19));
    total = Date.parse(endtime) - Date.parse(new Date());
    seconds = Math.floor((total / 1000) % 60);
    minutes = Math.floor((total / 1000 / 60) % 60);
    hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  }

  function doCountDownToOpen() {
    const endtime = new Date(new Date().setHours(10));
    total = Date.parse(endtime) - Date.parse(new Date());
    seconds = Math.floor((total / 1000) % 60);
    minutes = Math.floor((total / 1000 / 60) % 60);
    hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  }

  let intv;

  if (isOpen) {
    clearInterval(intv);
    intv = setInterval(doCountDownToClose, 1000);
  } else {
    clearInterval(intv);
    intv = setInterval(doCountDownToOpen, 1000);
  }
</script>


<div class="banner">
  {#if isOpen}
    <strong>We are open</strong>
    ...call now for a free consultation:
    <a href="tel:+14086562473">+1 (408) 656-2473</a>
  {:else}
    <strong>We are closed</strong>
    ...call back later for a free consultation:
  {/if}
  {hours}:{minutes}:{seconds}
</div>

Answer 1

好像您忘了将目标日期时间的分钟和秒设置为0，即。商店何时开/关

doCountDownToOpen() {
    let t = new Date();
    t.setHours(10);
    t.setMinutes(0)
    t.setSeconds(0)
    const endtime = new Date(t);
    this.total = Date.parse(endtime) - Date.parse(new Date());
    ...
    ..

与doCountDownToClose()相同

更新

我错了，实际上我们错过了以下事实：计数器功能中的第二个日期是本地日期时间，而不是目的地时区中的日期时间

total = Date.parse(endtime) - Date.parse(new Date());

改为尝试

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div class="banner" id="app">

  <strong v-if="isOpen">We are open</strong>
  <span v-if="isOpen">...call now for a free consultation:</span>
  <a v-if="isOpen" href="tel:+14086562473">+1 (408) 656-2473</a>

  <strong v-if="!isOpen">We are closed</strong>
  <span v-if="!isOpen">...call back later for a free consultation:</span>


  <span v-if="isOpen">Store closes in : {{hours}}:{{minutes}}:{{seconds}}</span>
  <span v-if="!isOpen">Store opens in : {{hours}}:{{minutes}}:{{seconds}}</span>
</div>




<script>
  new Vue({
    el: '#app',
    data: {
      total: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      intv: 0,
      isOpen: false
    },
    mounted() {
      this.hour = this.getHourAtLoc("America/Los_Angeles");

      this.isOpen = this.hour >= 10 && this.hour < 19;

      if (this.isOpen) {
        clearInterval(this.intv);
        this.intv = setInterval(this.doCountDownToClose, 1000);
      } else {
        clearInterval(this.intv);
        this.intv = setInterval(this.doCountDownToOpen, 1000);
      }
    },
    methods: {
      getHourAtLoc(loc, date = new Date()) {
        let f = new Intl.DateTimeFormat("en", {
          hour: "2-digit",
          hour12: false,
          timeZone: loc
        });

        return f.formatToParts(date)[0].value;
      },

      //GETS DATETIME IN DESTINATION TIMEZONE
      getDateAtLoc(loc, date = new Date()) {
        let f = new Intl.DateTimeFormat("en", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
          timeZone: loc
        });

        var l = f.formatToParts(date);

        var d = new Date(l[4].value, l[0].value - 1, l[2].value, l[6].value, l[8].value, l[10].value);
        return d;
      },

      doCountDownToClose() {
        let a = new Date();
        a.setHours(19);
        a.setMinutes(0)
        a.setSeconds(0)
        const endtime = new Date(a);

        this.total = Date.parse(a) - Date.parse(this.getDateAtLoc("America/Los_Angeles")); // How many ms till 7 PM in LA

        this.seconds = Math.floor((this.total / 1000) % 60);
        this.minutes = Math.floor((this.total / 1000 / 60) % 60);
        this.hours = Math.floor((this.total / (1000 * 60 * 60)) % 24);
      },

      doCountDownToOpen() {
        let a = new Date();

        a.setDate(a.getDate() + 1); //wrap to next day's 10 O'clock
        a.setHours(10);
        a.setMinutes(0)
        a.setSeconds(0)
        const endtime = new Date(a);

        this.total = Date.parse(endtime) - Date.parse(this.getDateAtLoc("America/Los_Angeles")); // How many ms till 10 AM in LA
        this.seconds = Math.floor((this.total / 1000) % 60);
        this.minutes = Math.floor((this.total / 1000 / 60) % 60);
        this.hours = Math.floor((this.total / (1000 * 60 * 60)) % 24);
      }

    }
  })
</script>

如何将倒数计时器设置为关闭营业，如果关闭则将倒数计时器设置为关闭营业？

1 个答案: