JavaScript 计时器不会在指定时间恢复

JavaScript timer doesn't resume at specified time

本文关键字：定时间 恢复 计时器 JavaScript      更新时间：2023-09-26

我得到了我不久前为自己写的计时器。昨天我实现了暂停功能，但是当我暂停它时，记录暂停时间并尝试再次将其传递给新的计时器 - 它比我暂停它更早开始。我整天都在挖掘，如何确定问题出在哪里。

请帮忙。

附言忽略/1000，我需要Unix时间戳用于不同的目的=）

var timerId;
function startTimer(started) {
	var localTime = new Date()/1000;
	return setInterval(function() {
		var totalSeconds = ((new Date()/1000) - started);
		var hours = Math.floor(totalSeconds / 3600);
		totalSeconds = totalSeconds % 3600;
		var minutes = Math.floor(totalSeconds / 60);
		totalSeconds = totalSeconds % 60;
		var seconds = Math.floor(totalSeconds);
		hours = (hours < 10 ? "0" : "") + hours;
		minutes = (minutes < 10 ? "0" : "") + minutes;
		seconds = (seconds < 10 ? "0" : "") + seconds;
		var timeString = hours + ":" + minutes + ":" + seconds;
		$('.timer .digits').text(timeString);
	}, 1000);
}
$('.start button').click(function() {
	timerId = startTimer(new Date()/1000);
  $('.start').hide().siblings('.pause').show();
});
$('.pause button').click(function() {
  var pausedTime = new Date()/1000;
	clearInterval(timerId);
  $('.timer').data('pausedTime', pausedTime);
  $('.pause').hide().siblings('.resume').show();
});
$('.resume button').click(function() {
  var pausedTime = $('.timer').data('pausedTime');
  timerId = startTimer(pausedTime);
  $('.resume').hide().siblings('.pause').show();
});
.pause, .resume {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='timer'>
  <div class='digits'>00:00:00</div>
  <div class='start'><button>Start</button></div>
  <div class='pause'><button>Pause</button></div>
  <div class='resume'><button>Resume</button></div>
</div>

希望你正在寻找这样的东西。由于这是一个计时器，您不需要特定的时间，只需保留经过的时间并在恢复时获取它。

var timerId;
function startTimer() {
	var elapsed = ($('.timer').data('pausedTime') | 0) || 0;
	return setInterval(function() {
		var totalSeconds = elapsed;
		var hours = Math.floor(totalSeconds / 3600);
		totalSeconds = totalSeconds % 3600;
		var minutes = Math.floor(totalSeconds / 60);
		totalSeconds = totalSeconds % 60;
		var seconds = Math.floor(totalSeconds);
		hours = (hours < 10 ? "0" : "") + hours;
		minutes = (minutes < 10 ? "0" : "") + minutes;
		seconds = (seconds < 10 ? "0" : "") + seconds;
		var timeString = hours + ":" + minutes + ":" + seconds;
		$('.timer .digits').text(timeString);
        $('.timer').data('pausedTime', ++elapsed);
	}, 1000);
}
$('.start button').click(function() {
  timerId = startTimer();
  $('.start').hide().siblings('.pause').show();
});
$('.pause button').click(function() {
  clearInterval(timerId);
  $('.pause').hide().siblings('.resume').show();
});
$('.resume button').click(function() {
  timerId = startTimer();
  $('.resume').hide().siblings('.pause').show();
});
.pause, .resume {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='timer'>
  <div class='digits'>00:00:00</div>
  <div class='start'><button>Start</button></div>
  <div class='pause'><button>Pause</button></div>
  <div class='resume'><button>Resume</button></div>
</div>

相关文章：