javascript - 给定时间和当前时间之间的进度条

Question

我计算给定时间和当前时间之间的时间，以获得进度条剩余的秒数。

它正在工作，但当我刷新页面时，它又从 0% 开始。 我想要这样的:

当前时间:15:30:00

到指定时间的时间:16:00:00

进度条位于 50%。

JS:

var start = (“01-02-2020 15:00:00”)
var end = (“01-02-2020 16:00:00”
var cur = new Date();

    var diff = end.getTime() - cur.getTime();
    var duration = (diff);

    $outer = $("#pbar_outerdiv");

    $outer.click(function() {
            $('#pbar_innerdiv')
                    .stop()
                    .css({ width: 0 })
                    .animate({ width: "100%" }, duration, "linear", function() { window.location.reload(1); });
    })

    $outer.trigger("click");
                                });

            }
        });

HTML:

  <div id="pbar_outerdiv">
        <div id="pbar_innerdiv"></div>
    </div>

CSS:

#pbar_outerdiv {
    margin-top: 50px;
    width: 100%;
    height: 20px;
    background: #ccc;
}

#pbar_innerdiv {
    height: 100%;
    width: 0;
    background: #f00;
}

Answer 1

考虑以下示例。您需要获取起点、终点和当前时间。找到结束时间和开始时间之间的增量来找出进度的持续时间，我们将其保留在duration中。然后找出自开始时间以来已经过去了多少时间，并将其除以 duration ，我们将其保留在 t 中。然后使用它作为 <progress/> 的值.

对于以下示例，我们将开始时间设置为 15 分钟前，结束时间设置为从现在起 30 分钟后。

const curr = new Date();
const start = new Date();
const end = new Date();

start.setMinutes(curr.getMinutes() - 15);
end.setMinutes(curr.getMinutes() + 30);

const duration = end.getMinutes() - start.getMinutes();
const t = (curr.getMinutes() - start.getMinutes()) / duration;

console.log(t);

const progress = document.getElementById("progress");
progress.value = t;

<progress id="progress" value="0"></progress>