javascript - 修复秒表中 'pause'的错误

Question

我正在尝试制作一个非常简单的秒表，但我无法使“暂停”正常工作。它应该暂停秒表，再次单击“开始”后 - 继续计时器。但它只是停止并重置计时器

var body = document.body;

var start = document.querySelector('.start');
var stop = document.querySelector('.stop');
var reset = document.querySelector('.reset');
var lap = document.querySelector('.lap');

var lapContainer = document.querySelector('.lapContainer');

var mil = document.querySelector('.milis');
var sec = document.querySelector('.secs');
var min = document.querySelector('.mins');
var hours = document.querySelector('.hours');
var flag = false;


// Create blocks for time markers
function createTimeSection(timeType) { // timeType = min/sec/ms/ :
  var lapTime = document.createElement('div');
  lapTime.classList.add('lapSection');
  lapBlock.appendChild(lapTime);
  lapTime.innerHTML = (timeType);
}

function createTimeBlock(type) {
  lapBlock = document.createElement('div');
  lapBlock.classList.add('lapBlock');
  lapContainer.appendChild(lapBlock);
  var lapText = document.createElement('div');

  lapText.classList.add('lapText');
  lapBlock.appendChild(lapText);
  lapText.innerHTML = (type);

  createTimeSection(hours);
  createTimeSection(':');
  createTimeSection(minutes);
  createTimeSection(':');
  createTimeSection(seconds);
  createTimeSection(':');
  createTimeSection(milliseconds);
}

// hide/display START/STOP buttons
function displayStopButton() {
  start.style.display = 'none';
  stop.style.display = 'block';
}

function displayStartButton() {
  start.style.display = 'block';
  stop.style.display = 'none';
}


// Get Date start point
function startStopwatch() {
  flag = true;
  initialDate = new Date;
}


// calculate timer
function getTime() {

  var currentDate = new Date;
  timer = new Date (currentDate - initialDate);
  
  milliseconds = timer.getMilliseconds();
  seconds = timer.getSeconds();
  minutes = timer.getMinutes();
  hours = timer.getUTCHours();

  if(milliseconds < 100){
    milliseconds = '0' + milliseconds;
  }
  if(seconds < 10){
    seconds = '0' + seconds;
  }
  if (minutes < 10){
    minutes = '0' + minutes;
  }
  if (hours < 10){
    hours = '0' + hours;
  }
}

// display timer in document
function counter() {
  getTime();
  mil.innerHTML = milliseconds;
  sec.innerHTML = seconds;
  min.innerHTML = minutes;
  hours.innerHTML = hours;
}

// interval for display
function displayTimer() {
  timerId = setInterval(counter, 10);
}


function stopTimer() {
  clearInterval(timerId);
  getTime();
  createTimeBlock('STOP');
  flag = false;
}

function newLap() {
  if (flag == true){
    getTime();
    createTimeBlock('LAP');
  } else {
    lapBlock = document.createElement('div');
    lapBlock.classList.add('lapBlock');
    lapContainer.appendChild(lapBlock);
    var lapText = document.createElement('div');

    lapText.classList.add('lapText');
    lapBlock.appendChild(lapText);
    lapText.innerHTML = ('PRESS START FIRST');
  }
}


function resetTimer() {
  flag = false;
  clearInterval(timerId);
  start.style.display = 'block';
  stop.style.display = 'none';
  mil.innerHTML = '00';
  min.innerHTML = '00';
  sec.innerHTML = '00';
  document.querySelector('.lapContainer').innerHTML = '';
}

start.addEventListener('click', startStopwatch);
start.addEventListener('click', displayStopButton);
start.addEventListener('click', displayTimer);

lap.addEventListener('click', newLap)

stop.addEventListener('click', stopTimer)
stop.addEventListener('click', displayStartButton);

reset.addEventListener('click', resetTimer);

.top-block{
	position: fixed;
	left: 150px;
}

.sw{
	float: left;
	width: 100px;
	height: 30px;
	border: 1px solid black;
	margin: 10px;
	text-align: center;
}

.buttons-block{
	clear: both;
}

.button{
	margin: 10px;
	float: left;
	display: block;
	width: 100px;
	height: 30px;
	color: black;
	font-weight: bold;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	line-height: 30px;
	border: 1px solid black;
}


.start{
	background: green;
	clear: both;	
}

.stop{
	display: none;
	background: yellow;
}

.reset{
	background: #6b919c;
}

.lap{
	background: rgb(120,120,120);
}

.hours,
.secs,
.mins,
.milis{
	margin: 0;
	line-height: 32px;
}

.lapBlock{
	clear: both;
	height: 30px;
	width: 280px;
}

.lapSection{
	float: left;
	margin: 1px;
}

.lapText{
	float: left;
	margin-right: 5px;
}

.lapContainer{
	float: left;
	margin-top: 15px;
}

	<div class="top-block">
		<div class="sw">
		  <p class="hours">00</p>
		</div>

		<div class="sw">
		  <p class="mins">00</p>
		</div>

		<div class="sw">
		  <p class="secs">00</p>
		</div>

		<div class="sw">
		  <p class="milis">00</p>
		</div>

		<div class="buttons-block">
			<a href="#" class="button start">START</a>
			<a href="#" class="button stop">PAUSE</a>
			<a href="#" class="button lap">LAP</a>
			<a href="#" class="button reset">RESET</a>
		</div>
	</div>
	<div class="lapContainer">
		
	</div>

或者代码笔: http://codepen.io/ArkadiyS/pen/XKdLqz

Answer 1

您应该仅在重置计时器时重置日期，但也可以在计时器暂停后重置日期。

为此，我将日期初始化移至开头，并在重置时应用它。

此外，即使停止，您的计时器也会继续滴答作响，为了避免这种情况，我只是计算停止偏移并将其应用于日期:

setInterval(function(){
  if(flag==false) offset+=10;
},10)

<小时/>

initialDate = new Date;
var body = document.body;

var start = document.querySelector('.start');
var stop = document.querySelector('.stop');
var reset = document.querySelector('.reset');
var lap = document.querySelector('.lap');

var lapContainer = document.querySelector('.lapContainer');

var mil = document.querySelector('.milis');
var sec = document.querySelector('.secs');
var min = document.querySelector('.mins');
var hours = document.querySelector('.hours');
var flag = false;
var waitTimer, offset=0;


// Create blocks for time markers
function createTimeSection(timeType) { // timeType = min/sec/ms/ :
  var lapTime = document.createElement('div');
  lapTime.classList.add('lapSection');
  lapBlock.appendChild(lapTime);
  lapTime.innerHTML = (timeType);
}

function createTimeBlock(type) {
  lapBlock = document.createElement('div');
  lapBlock.classList.add('lapBlock');
  lapContainer.appendChild(lapBlock);
  var lapText = document.createElement('div');

  lapText.classList.add('lapText');
  lapBlock.appendChild(lapText);
  lapText.innerHTML = (type);

  createTimeSection(hours);
  createTimeSection(':');
  createTimeSection(minutes);
  createTimeSection(':');
  createTimeSection(seconds);
  createTimeSection(':');
  createTimeSection(milliseconds);
}

// hide/display START/STOP buttons
function displayStopButton() {
  start.style.display = 'none';
  stop.style.display = 'block';
}

function displayStartButton() {
  start.style.display = 'block';
  stop.style.display = 'none';
}


// Get Date start point
function startStopwatch() {
  flag = true;
  
}
setInterval(function(){
  if(flag==false) offset+=10;
},10)
// calculate timer
function getTime() {

  var currentDate = new Date;
  timer = new Date (currentDate - initialDate - offset);
  
  milliseconds = timer.getMilliseconds();
  seconds = timer.getSeconds();
  minutes = timer.getMinutes();
  hours = timer.getUTCHours();

  if(milliseconds < 100){
    milliseconds = '0' + milliseconds;
  }
  if(seconds < 10){
    seconds = '0' + seconds;
  }
  if (minutes < 10){
    minutes = '0' + minutes;
  }
  if (hours < 10){
    hours = '0' + hours;
  }
}

// display timer in document
function counter() {
  getTime();
  mil.innerHTML = milliseconds;
  sec.innerHTML = seconds;
  min.innerHTML = minutes;
  hours.innerHTML = hours;
}

// interval for display
function displayTimer() {
  timerId = setInterval(counter, 10);
}


function stopTimer() {
  clearInterval(timerId);
  getTime();
  createTimeBlock('STOP');
  flag = false;
}

function newLap() {
  if (flag == true){
    getTime();
    createTimeBlock('LAP');
  } else {
    lapBlock = document.createElement('div');
    lapBlock.classList.add('lapBlock');
    lapContainer.appendChild(lapBlock);
    var lapText = document.createElement('div');

    lapText.classList.add('lapText');
    lapBlock.appendChild(lapText);
    lapText.innerHTML = ('PRESS START FIRST');
  }
}


function resetTimer() {
  initialDate = new Date;
  flag = false;
  offset=0;
  clearInterval(timerId);
  start.style.display = 'block';
  stop.style.display = 'none';
  mil.innerHTML = '00';
  min.innerHTML = '00';
  sec.innerHTML = '00';
  document.querySelector('.lapContainer').innerHTML = '';
}

start.addEventListener('click', startStopwatch);
start.addEventListener('click', displayStopButton);
start.addEventListener('click', displayTimer);

lap.addEventListener('click', newLap)

stop.addEventListener('click', stopTimer)
stop.addEventListener('click', displayStartButton);

reset.addEventListener('click', resetTimer);

.top-block{
	position: fixed;
	left: 150px;
}

.sw{
	float: left;
	width: 100px;
	height: 30px;
	border: 1px solid black;
	margin: 10px;
	text-align: center;
}

.buttons-block{
	clear: both;
}

.button{
	margin: 10px;
	float: left;
	display: block;
	width: 100px;
	height: 30px;
	color: black;
	font-weight: bold;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	line-height: 30px;
	border: 1px solid black;
}


.start{
	background: green;
	clear: both;	
}

.stop{
	display: none;
	background: yellow;
}

.reset{
	background: #6b919c;
}

.lap{
	background: rgb(120,120,120);
}

.hours,
.secs,
.mins,
.milis{
	margin: 0;
	line-height: 32px;
}

.lapBlock{
	clear: both;
	height: 30px;
	width: 280px;
}

.lapSection{
	float: left;
	margin: 1px;
}

.lapText{
	float: left;
	margin-right: 5px;
}

.lapContainer{
	float: left;
	margin-top: 15px;
}

<div class="top-block">
		<div class="sw">
		  <p class="hours">00</p>
		</div>

		<div class="sw">
		  <p class="mins">00</p>
		</div>

		<div class="sw">
		  <p class="secs">00</p>
		</div>

		<div class="sw">
		  <p class="milis">00</p>
		</div>

		<div class="buttons-block">
			<a href="#" class="button start">START</a>
			<a href="#" class="button stop">PAUSE</a>
			<a href="#" class="button lap">LAP</a>
			<a href="#" class="button reset">RESET</a>
		</div>
	</div>
	<div class="lapContainer">
		
	</div>