时间戳

首页 > 解决方案 > 后备倒计时计时器设置为每周同一天/同一时间

javascript - 后备倒计时计时器设置为每周同一天/同一时间

问题描述

如果用户在后端设置日期（通过 jQuery DateTimer Picker），acf_vars.timer那么前端的以下变量将如下所示：

2021 2 9 13 08 00

我有以下构造作为倒数计时器（CODEPEN）：

const [y, month, d, h, minute, s] = acf_vars.timer.split(' ');

// monthIndex in Date Object begins with 0, so we subtract 1
const countDownDate = new Date(y, month - 1, d, h, minute, s).getTime();

const updateCountdown = () => {
    const now = new Date().getTime(); // Get today's date and time
    const distance = countDownDate - now; // Find distance between now and the countdown date
    const expiredTimer = distance <= 0;

    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);

    if (expiredTimer) {
        days = hours = minutes = seconds = 0;
        clearInterval(timerInterval);
    }

    document.querySelectorAll('.ticker').forEach((container) => {
        container.children[0].classList.contains('days') &&
            (container.children[0].textContent = days);
        container.children[2].classList.contains('hours') &&
            (container.children[2].textContent = hours);
        container.children[4].classList.contains('minutes') &&
            (container.children[4].textContent = minutes);
        container.children[6].classList.contains('seconds') &&
            (container.children[6].textContent = seconds);
    });
};

const timerInterval = setInterval(updateCountdown, 1000);

updateCountdown();

如果用户没有在后端指定未来的日期，我想使用一个后备，它会自动将倒数计时器设置为即将到来的周日上午 9 点。为了解决这个问题，我尝试设置一个标准化countDownDate变量，但我无法想出一种方法来将日期和时间设置为自动成为即将到来的周日上午 9 点。

标签： javascriptdatetime

解决方案

Moment.js可能是您正在寻找的。

moment().endOf('week').add(1, 'second').add(9, 'hours').toString()

End of week 使用区域设置感知周开始日，因此如果您在全球范围内拥有用户，则可能必须对其进行配置。

编辑

或者，如果您不想使用外部库，您可以使用 JavaScript Date对象检查当前的工作日和小时。

const day = countDownDate.getDay() // weekday sun = 0, sat = 6
const hour = countDownDate.getHours() // 0 - 23

在您的逻辑中，您可能希望获得distance介于天和 0 之间（也考虑countDownDate从星期日开始）和小时和 9。但是，实现此目的的另一种方法是在每次更新时检查当前日期，这可以减少错误如果间隔被打断。

推荐阅读