Он работает не точно. Существует довольно большая погрешность. Почему? И как исправить?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="clock">
<span id="hours">00</span>
:
<span id="minutes">00</span>
:
<span id="seconds">00</span>
</div>
<button id ="start">Старт</button>
<button id = "stop" onclick="clearInterval(st)">Стоп</button>
</body>
<script>
var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var h = 0;
var m = 0;
var s = 0;
var right = true;
var count;
var stopwatch = function(){
if (right) {
count = setInterval (function() {
s++;
if (s == 60) {
s = 0;
m++;
}
if (m == 60) {
m = 0;
h++;
}
if (h == 24) {
h = 0;
}
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
if (hours.innerHTML == 0) hours.innerHTML = "0" + hours.innerHTML;
if (hours.innerHTML < 10 && hours.innerHTML.charAt(0) != 0) {
hours.innerHTML = "0" + hours.innerHTML;
}
if (minutes.innerHTML == 0) minutes.innerHTML = "0" + minutes.innerHTML;
if (minutes.innerHTML < 10 && minutes.innerHTML.charAt(0) != 0) {
minutes.innerHTML = "0" + minutes.innerHTML;
}
if (seconds.innerHTML < 10 && seconds.innerHTML.charAt(0) != 0) {
seconds.innerHTML = "0" + seconds.innerHTML;
}
},
1000);
}
right = false;
}
var rightToFalse = function() {
if (right == false) right = true;
}
start.addEventListener("click", stopwatch);
stop.addEventListener("click", rightToFalse);
</script>
</html>