Question

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

它正在工作，但是当我刷新页面时不起作用，它再次从0％开始。我想要我这样：

当前时间：15:30:00

给定时间的时间：16:00:00

进度条为50％。

JS：

> !is.null(plot_a$theme$aspect.ratio)
[1] TRUE
> !is.null(plot_b$theme$aspect.ratio)
[1] FALSE

HTML：

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

            }
        });

CSS：

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

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>

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

1 个答案: