时间戳

首页 > 解决方案 > 即使在暂停时，如何让日期计数器停止在后台运行？任何和所有的帮助表示赞赏

javascript - 即使在暂停时，如何让日期计数器停止在后台运行？任何和所有的帮助表示赞赏

问题描述

我有一个带有播放/暂停按钮的日期计数器，效果很好，但是，在暂停期间，计数器继续在后台运行。

要明白我的意思，按暂停，等待 10 秒，按播放，您会看到日期提前了 1 或 2 个月，而不是到第二天。我很感激任何帮助。我的代码如下。 

var virtualOrigin = Date.parse("2020-01-01"),
    realOrigin = Date.now(),
    factor = 862350;

function getVirtual(time) {
    return new Date(virtualOrigin + (time - realOrigin) * factor);
}

function format(time) {
    var month = time.getMonth() + 1;
    var day = time.getDate();
    if (month < 10) {
        month = '0' + month;
    }
    if (day < 10) {
        day = '0' + day;
    }
    return (month) +
        "-" + day +
        "-" + time.getFullYear();
}
var output = document.getElementById("txt");
var t = 0;
var flagTimer = 'startTime()';

function pause() {
    if (flagTimer == 'startTime()') {
        clearTimeout(t);
        document.getElementById('Pause').value = "Play";
        flagTimer = 'pause';
    } else {
        flagTimer = 'startTime()';
        document.getElementById('Pause').value = "Pause";
        startTime();
    }
}

function startTime() {
    var now = new Date();
    var display = getVirtual(now);
    output.innerText = format(display);
    t = setTimeout(startTime, 1000 / factor - (now.getMilliseconds() %
        (1000 / factor)));
}

function clickEvent() {
    pause();
}
.txt {
	color: orange;
	margin-left: 46%;
	margin-top: 10%;
	position: absolute;
	z-index: 300;
}

#Pause {
	margin-left: 47.6%;
	margin-top: 10%;
	border: 2px solid orange;
	color: blue;
	display: block;
	width: 55px;
	text-align: center;
}

#Pause:hover {
	background-color: orange;
	color: white;
	border: 2px solid lightblue;
}

#toggle-animation {
	margin-left: 45.5%;
	margin-top: 10%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>timer8</title>
    <meta charset=UTF-8>
  </head>
  <body onload="startTime()">
    <input type="button" id="Pause" class="toggle-animation" value="Pause" onclick="clickEvent();" />
    <div id="txt" class="txt"></div>
  </body>
</html>

标签： javascript

解决方案

您计算虚拟日期的函数：

  function getVirtual(time) {
    return new Date( virtualOrigin + (time - realOrigin) * factor );
  }

...根据当前时间和页面加载时间之间的差异计算它，无论您是否已暂停。

您可以通过以下方式解决此问题：

  • 暂停时，更新virtualOrigin到当前的虚拟日期时间
  • 在您的 getVirtual(time) 函数中，仅在计时器未暂停时添加差异
  • 取消暂停时，更新realOrigin到当前的实际日期时间。

推荐阅读