миллисекундомер?

135

13 мая 2019, 06:00

знатоки нужно сделать миллисекундомер на javascript. Т.е. функция которая начинает считать и другая функция которая остановит счет и вставит результат в другой блок.

Что то на подобии вот такого:

var time=0; 
function timeView(){ 
    document.getElementById('a').innerHTML = time; 
    time++; 
    setTimeout("timeView()", 100); 
}

<html> 
<body onload="timeView()"> 
<div id=a></div> 
</body> 
</html>

Только с кнопкой стоп и вставлять результат в другой div блок.

Answer 1

Вы в своём вопросе и дали ответ.

var time = 0; 
var hTimer = null; 
 
function startTimer() { 
  if (hTimer) { 
    hTimer = clearInterval(hTimer); 
  } else { 
    hTimer = setInterval(updateTimer, 100); 
  } 
} 
 
function resetTimer() { 
  time = 0; 
} 
 
function updateTimer() { 
  document.getElementById('a').textContent = ++time; 
} 
 
function copyTimer() { 
  document.getElementById('result').textContent = time; 
}

<html> 
 
<body > 
  <div id=a></div> 
  <div>Result: 
    <div id="result"></div> 
  </div> 
  <button onClick="startTimer()">Start/Stop</button> 
  <button onClick="resetTimer()">Reset</button> 
  <button onClick="copyTimer()">Copy</button> 
</body> 
 
</html>

Answer 2

const t = document.getElementById('start-n-stop'), 
      x = document.getElementById('x'), 
      y = document.getElementById('y') 
f = onclick = e => { 
  (d = new Date()), 
  (f ? itv = setInterval("x.textContent=(new Date-d)/1e3") : clearInterval(itv)) 
  f = !f 
  if (t.textContent === 'Start') { 
    t.textContent = 'Stop' 
  } else { 
    t.textContent = 'Start'; 
    y.textContent += '\n' + x.textContent 
  } 
}

* { 
  margin: 0; 
  padding: 0; 
  user-select: none; 
} 
 
body { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.millisecond-stopwatch { 
  display: flex; 
} 
 
#a { 
  height: 1rem; 
} 
 
#start-n-stop { 
  position: absolute; 
  top: 10%; 
  left: 5%; 
  transform: translateY(-50%); 
  font-size: 2rem; 
  padding: 1rem; 
} 
 
#output { 
  display: flex; 
  border: 0.0625rem dashed; 
  width: 50%; 
  min-height: 3rem; 
} 
 
#output>div { 
  width: 50%; 
  height: inherit; 
} 
 
#output>div:first-child { 
  border-right: 0.0625rem dashed; 
}

<div id="start-n-stop">Start</div> 
<div class="millisecond-stopwatch"> 
</div> 
<div id="output"> 
  <div id="x"></div> 
  <div id="y"></div> 
</div>