我有一个显示当前日期和时间的setInterval,现在我正在扩展该代码,以便它还将显示日历年中的进展百分比.截至 compose 本文时,我们的比例为29%.此计算效果良好(请参阅下面的final变量).我的问题是:

如何获得该比例达到30%之前的剩余时间?一旦我们到达那一点:距离它变成31%的时间,..等等?

我知道,大约每三天半(确切地说是87.5小时)就会出现一次这种规模的百分比增加.

这是我的代码:

setInterval(function () {
  const dt = new Date();
  document.getElementById("datetime").innerHTML =
    ("0" + dt.getDate()).slice(-2) +
    "." +
    ("0" + (dt.getMonth() + 1)).slice(-2) +
    "." +
    dt.getFullYear() +
    " " +
    ("0" + dt.getHours()).slice(-2) + 
    ":" +
    ("0" + dt.getMinutes()).slice(-2) +
    ":" +
    ("0" + dt.getSeconds()).slice(-2)
}, 1);

const start = new Date(2023,12,1); 
const end = new Date(2024,12,1);
const today = new Date();
const total = end - start;
let progress = today - start;
const final = Math.round(progress / total * 100 ) + "%"
const finalCalc = document.querySelector("#percentage")
finalCalc.innerHTML = final;
Current time: <span id="datetime"></span><br>
Progress: <span id="percentage"></span><br>
Until next %-increment: <span id="remaining">?</span>

我希望看到添加并保持更新的输出例如:

下一个百分比增量将发生在xxx小时数内

我如何才能实现这一目标?

推荐答案

首先,要意识到new Date(2024,12,1)new Date(2025,0,1)相同,因为月份参数是从零开始的.

其次,我不会在您的百分比公式中使用round,因为这意味着您将在目标日期前两天达到round%.改用floor.

您可以取百分比,加一,然后颠倒公式,以知道何时百分比将增加一个单位.

这是一个片段:

const start = new Date(2024,0,1); 
const end = new Date(2025,0,1);

const outTime = document.querySelector("#datetime");
const outPct = document.querySelector("#percentage");
const outRem = document.querySelector("#remaining");

setInterval(function () {
    const today = new Date();
    outTime.textContent = today.toLocaleString("bg").replace(/ \D+/g, " ");
    if (today >= end) {
        outPct.textContent = "100%";
        outRem.textContent = "";
        return;
    }
    const total = end - start;
    const progress = today - start;
    const pct = Math.floor(progress / total * 100);
    outPct.textContent = pct + "%";
    const next = (pct+1) / 100 * total;
    const countdown = Math.ceil((next - progress) / 1000);
    const hours = Math.floor(countdown / 3600);
    const minutes = Math.floor((countdown % 3600) / 60);
    const seconds = countdown % 60;
    outRem.textContent = `${hours} hours, ${minutes} minutes and ${seconds} seconds`
                         .replace(/\b(1 \w+)s\b/g, "$1");
}, 1);
Current time: <span id="datetime"></span><br>
Progress: <span id="percentage"></span><br>
Until next %-increment: <span id="remaining"></span><br>

像这样很难测试正确性,因为百分比增加需要很长时间,因此可以使用两个彼此接近的日期来做到这一点,例如仅相隔1小时(当前小时的开始和结束):

const start = new Date();
start.setMinutes(0, 0, 0); // Start of the current hour
const end = new Date();
end.setMinutes(60, 0, 0); // End of the current hour

const outTime = document.querySelector("#datetime");
const outPct = document.querySelector("#percentage");
const outRem = document.querySelector("#remaining");

setInterval(function () {
    const today = new Date();
    outTime.textContent = today.toLocaleString("bg").replace(/ \D+/g, " ");
    if (today >= end) {
        outPct.textContent = "100%";
        outRem.textContent = "";
        return;
    }
    const total = end - start;
    const progress = today - start;
    const pct = Math.floor(progress / total * 100);
    outPct.textContent = pct + "%";
    const next = (pct+1) / 100 * total;
    const countdown = Math.ceil((next - progress) / 1000);
    const hours = Math.floor(countdown / 3600);
    const minutes = Math.floor((countdown % 3600) / 60);
    const seconds = countdown % 60;
    outRem.textContent = `${hours} hours, ${minutes} minutes and ${seconds} seconds`
                         .replace(/\b(1 \w+)s\b/g, "$1");
}, 1);
Current time: <span id="datetime"></span><br>
Progress: <span id="percentage"></span><br>
Until next %-increment: <span id="remaining"></span><br>

Javascript相关问答推荐

fetch在本地设置相同来源的cookie,但部署时相同的代码不会设置cookie

一次仅播放一个音频

如何在不分配整个数组的情况下修改包含数组的行为主体?

可以的.是否可以在不预编译的情况下使用嵌套 Select 器?

有条件的悲剧

为什么我的includes声明需要整个字符串?

react—router v6:路由没有路径

为什么useState触发具有相同值的呈现

如何在coCos2d-x中更正此错误

Next.js服务器端组件请求,如何发送我的cookie token?

映射类型定义,其中值对应于键

使用VUE和SCSS的数字滚动动画(&;内容生成)

在表单集中保存更改时删除';禁用';

JavaScript:如果字符串不是A或B,则

将相关数据组合到两个不同的数组中

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

MUI迷你图:如何将$符号添加到MUI迷你图中的工具提示数据

是否有静态版本的`instanceof`?

每隔一行文本段落进行镜像(Boustrophedon)

不允许在对象文本中注释掉的属性