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

Question

我是 HTML 的新手，在网上找到了一些关于如何为各种用途制作进度条的教程 - 但对于长时间倒计时一无所获；（一天又一天）。

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

理想情况下，倒计时将从左侧开始，使用特定日期的特定时间作为起点，并随着时间的推移向右移动 - 当倒计时结束时到达终点，具体时间为第二次约会到了。时间也应该特定于 EST，而不是计算机上的本地时间。

如有任何帮助，我们将不胜感激！！

Answer 1

你必须：

计算下个月还有多少天。

这是通过获取当前日期（通过 Date constructor) and getting the current month (with Date.getMonth()），然后通过 Date 构造函数构造一个新日期并将 1 添加到当前月份索引来实现的。这就是下面示例中的 nextMonth。
计算下个月与当天的天数

这有点棘手。您必须获得两个日期之间的毫秒差（通过减去当前日期和下个月的 return 由 Date.getTime() 编辑的结果），然后除以 1000（得到秒数） , 60（分钟），60（小时），最后除以 24（天）。
计算当月天数

这是通过将月份设置为比当前月份晚一个月，并将日期设置为 0 来完成的。为什么？当dayValue设置为0时，日期将设置为上个月的最后一天，由于我们将月份设置为下个月，因此将return当月的最后一天.调用 getDate() 然后 return 是一个月中的第几天。

要制作进度条，你可以简单地使用<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>

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

Countdown to next month - progress bar - JavaScript

html

javascript

css

web

progress-bar

计算下个月还有多少天。

计算下个月与当天的天数

计算当月天数