下个月倒计时 - 进度条 - JavaScript

Question

我对 HTML 非常陌生，并且在网上找到了一些关于如何制作各种用途的进度条的教程 - 但长时间倒计时一无所获； （一天到一天）。

我想要一个进度条倒计时到下个月。例如，如果今天是 4 月 15 日，进度条将填充 50%，因为距离下个月还有 15 天。

理想情况下，倒计时将从左侧开始，以某一天的特定时间为起点，并随着时间的推移向右移动 - 倒计时结束时到达特定第二个日期的时间已经到达。时间也应该特定于 EST 而不是计算机上的本地时间。

对此的任何帮助将不胜感激！！

Answer 1

你必须：

• 计算下个月还有多少天。

  这是通过获取当前日期（通过Date 构造函数）和获取当前月份（使用Date.getMonth()），然后通过Date 构造函数构造一个新日期并将1 添加到当前日期来实现的月指数。这就是下面示例中的nextMonth。

• 计算下个月和当天之间的天数

  这有点棘手。您必须获得两个日期之间的毫秒差（通过减去Date.getTime() 返回的当前日期和下个月的结果），然后除以 1000（获得秒数）、60（分钟数），再次为 60（数小时），最后除以 24（数天）。

• 计算当月的天数

  这是通过将月份设置为比当前月份晚一个月，并将日期设置为 0 来完成的。为什么？当dayValue设置为0时，日期将设置为上个月的最后一天，由于我们将月份设置为下个月，所以它会返回当月的最后一天。调用 getDate() 然后返回月份中的日期。

---

要制作进度条，您只需使用<progress> element。将最大值设置为当月的天数，将值设置为天数减去下个月之前的天数（本月到目前为止已经过去了多少天）。

const now = new Date();
const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
const diffDays = Math.ceil(Math.abs(nextMonth.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
now.setMonth(now.getMonth() + 1);
now.setDate(0);
const daysInCurrentMonth = now.getDate();
progress.max = daysInCurrentMonth;
progress.value = daysInCurrentMonth - diffDays;

/* below for debug purposes only */

console.log('Days in current month: ' + daysInCurrentMonth);
console.log('Days until next month: ' + diffDays);

#progress {
  width: 100%;
}

<progress id="progress"></progress>