Hola buen día estoy haciendo un cronometro, pero cuando lo ejecuto en mi navegador solo funciona cuando estoy dentro de la pagina cuando cambio de pestaña el cronometro se para en el tiempo en que haya quedado antes de cambiar de pestaña. Mi código JS es el siguiente:
var centesimas = 0;
var segundos = 0;
var minutos = 0;
var horas = 0;
var audio = document.getElementById("audio");
function inicio () {
control = setInterval(cronometro,10);
document.getElementById("inicio").disabled = true;
document.getElementById("parar").disabled = false;
document.getElementById("continuar").disabled = true;
document.getElementById("reinicio").disabled = false;
}
function parar () {
clearInterval(control);
document.getElementById("parar").disabled = true;
document.getElementById("continuar").disabled = false;
}
function reinicio () {
clearInterval(control);
centesimas = 0;
segundos = 0;
minutos = 0;
horas = 0;
Centesimas.innerHTML = ":00";
Segundos.innerHTML = ":00";
Minutos.innerHTML = ":00";
Horas.innerHTML = "00";
document.getElementById("inicio").disabled = false;
document.getElementById("parar").disabled = true;
document.getElementById("continuar").disabled = true;
document.getElementById("reinicio").disabled = true;
}
function cronometro () {
if (centesimas < 99) {
centesimas++;
if (centesimas < 10) { centesimas = "0"+centesimas }
Centesimas.innerHTML = ":"+centesimas;
}
if (centesimas == 99) {
centesimas = -1;
}
if (centesimas == 0) {
segundos ++;
if (segundos < 10) { segundos = "0"+segundos }
Segundos.innerHTML = ":"+segundos;
}
if (segundos == 59) {
segundos = -1;
}
if ( (centesimas == 0)&&(segundos == 0) ) {
minutos++;
if (minutos < 10) { minutos = "0"+minutos }
Minutos.innerHTML = ":"+minutos;
}
if (minutos == 59) {
minutos = -1;
}
if ( (centesimas == 0)&&(segundos == 0)&&(minutos == 0) ) {
horas ++;
if (horas < 10) { horas = "0"+horas }
Horas.innerHTML = horas;
}
if(minutos == 1){
clearInterval(control);
document.getElementById("parar").disabled = true;
document.getElementById("continuar").disabled = false;
enableAutoplay();
}
}
function enableAutoplay() {
audio.autoplay = true;
audio.load();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="css/micss.css" rel="stylesheet">
<title>Pomodoro</title>
</head>
<body>
<div id="contenedor">
<div class="reloj" id="Horas">00</div>
<div class="reloj" id="Minutos">:00</div>
<div class="reloj" id="Segundos">:00</div>
<div class="reloj" id="Centesimas">:00</div>
<input type="button" class="boton" id="inicio" value="Inicio ►" onclick="inicio();">
<input type="button" class="boton" id="parar" value="Parar ∎" onclick="parar();" disabled>
<input type="button" class="boton" id="continuar" value="Continuar ↺" onclick="inicio();" disabled>
<input type="button" class="boton" id="reinicio" value="Reiniciar ↻" onclick="reinicio();" disabled>
<audio id="audio" src="archivos/timbre.mp3">
</audio>
</div>
<script src="js/mijs.js"></script>
</body>
</html>