2

Buenas tardes estoy realizando una cuenta regresiva de 60 segundos con centésimas de segundo. Mi problema es:

  • Que con el primer segundo que debe aparecer no cuadra con las centésimas de segundo a:

60:00 <-- 60 segundos con 00 centésimas de segundo (00 es el redondeo de la milésima de segundo)

  • y que se detenga en 00:00, pintándose de color rojo.

window.onload = function() {
    cs_visor=document.getElementById("reloj_cs"); //localizar pantalla del reloj
    sg_visor=document.getElementById("reloj_sg"); //localizar pantalla del reloj
	empezar ();
		}

	//variables de inicio:
	var marcha;
	var cro=0; 

function empezar() 
{
    emp=new Date() //fecha actual
    emp.setMinutes(emp.getMinutes() + 1); // agrego 1 min a la fecha actual
	elcrono=setInterval(tiempo,10); //función ejecutada cada decima de segundo
	marcha=1 //indicamos que se ha puesto en marcha.
}
	  
//función del temporizador
function tiempo() 
{ 
    actual=new Date() //fecha en el instante
	cro=emp- actual //resto fecha+60seg - fecha actual
	cr=new Date() //fecha donde guardamos el tiempo transcurrido
    cr.setTime(cro) 
    cs=cr.getMilliseconds() //milisegundos del cronómetro
    cs=cs/10; //paso a centésimas de segundo.
    cs=Math.round(cs)
    sg=cr.getSeconds(); //segundos del cronómetro
    if (cs<10) {cs="0"+cs;}  //poner siempre 2 cifras en los números
	if (sg<10) {sg="0"+sg;} 
    cs_visor.innerHTML= cs; //pasar a pantalla.
    sg_visor.innerHTML= sg; //pasar a pantalla.
  }
.oval {
    width: 300px;
    height: 185px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    /*background: #fff;*/
    border: 10px solid #000000;
    /* opacity: 0.5;*/
    display: flex;
    /*justify-content: center;*/
    align-items: center;
}

.crono {
  color:#000000; 
  font-family: 'Agency FB', arial;
  font-size: 600%;
  text-shadow: 4px 4px 4px #aaa;
  padding-left: 49px;
    
}
<center> 
    <section  class="oval">
      <div id="cronometro">
          <div class="crono"> 
            <span id="reloj_sg">00</span>:
            <span id="reloj_cs">00</span>
          </div>
        </div>
    </section>
</center>

4
  • qué quieres decir con "Que con el primer segundo que debe aparecer no cuadra con las centésimas de segundo" ?? querrías que aparezca 60:00?? Es imposible, como que arrancas el interval a 60s la primera vez que pase por el callback tiempo() ya habrán pasado como mínimo 10ms por lo que el tiempo será 59:59 o menor
    – PA.
    Commented el 24 abr. 2020 a las 18:17
  • 1
    para detenerlo, deberás controlar en tu callback tiempo() que se produzca la condición, cambiar el display, y parar el interval con clearInterval()
    – PA.
    Commented el 24 abr. 2020 a las 18:18
  • Claro, pero como la función que tengo trabaja con la fecha actual, en la mayoría de veces, lo captura con los milisegundos ya pasados ejemplo 10:5441 (ss:ml) en lo que quiero es 10:0000 (ss:ml). Quizá debo de cambiar la función. Commented el 24 abr. 2020 a las 18:24
  • para evitar el redondeo prematuro en las operaciones, puedes usar directamente el tiempo en milisegundos, con la función Date.now(). De esta forma, simplemente guardas el inicio de la cuenta atrás con Date.now()+60000 y en tu función tiempo calculas la diferencia en ms con inicio-Date.now(). Pasar de milisegundos a segundos.centesimas ya más o menos lo tienes.
    – PA.
    Commented el 24 abr. 2020 a las 19:12

3 respuestas 3

1

var initial = 5 * 1000;
var count = initial;
var counter; //10 will  run it every 100th of a second
var initialMillis;

function timer() {
  if (count <= 0) {
    clearInterval(counter);
    return;
  }
  var current = Date.now();

  count = count - (current - initialMillis);
  initialMillis = current;
  displayCount(count);
}

function displayCount(count) {
  let res = Math.floor(count / 1000);
  let milliseconds = count.toString().substr(-3);
  let seconds = res;


  if (seconds <= 0 && milliseconds <= 0) {
    document.getElementById("reloj_sg").classList.add("rojo");
    document.getElementById("reloj_cs").classList.add("rojo");
    document.getElementById("reloj_sg").innerHTML = 0;
    document.getElementById("reloj_cs").innerHTML = 0;
  } else {
    document.getElementById("reloj_sg").innerHTML = seconds;
    document.getElementById("reloj_cs").innerHTML = milliseconds;
  }

}

$('#start').on('click', function() {
  document.getElementById("reloj_sg").classList.remove("rojo");
  document.getElementById("reloj_cs").classList.remove("rojo");
  clearInterval(counter);
  initialMillis = Date.now();
  counter = setInterval(timer, 1);
});

$('#stop').on('click', function() {
  clearInterval(counter);
});

$('#reset').on('click', function() {
  document.getElementById("reloj_sg").classList.remove("rojo");
  document.getElementById("reloj_cs").classList.remove("rojo");
  clearInterval(counter);
  count = initial;
  displayCount(count);
});

displayCount(initial);
.oval {
  width: 300px;
  height: 185px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  /*background: #fff;*/
  border: 10px solid #000000;
  /* opacity: 0.5;*/
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.crono {
  color: #000000;
  font-family: 'Agency FB', arial;
  font-size: 600%;
  text-shadow: 4px 4px 4px #aaa;
  padding-left: 49px;
}

.rojo {
  color: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<center>
  <section class="oval">
    <div id="cronometro">
      <div class="crono">

        <span id="reloj_sg">00</span>:
        <span id="reloj_cs">00</span>
      </div>
    </div>
  </section>
</center>
<button id="start">iniciar</button>
<button id="stop">parar</button>
<button id="reset">reiniciar</button>

1

Para evitar el redondeo prematuro en las operaciones, puedes usar directamente el tiempo en milisegundos, con la función Date.now().

De esta forma, simplemente guardas el final de la cuenta atrás con Date.now()+60000 y en tu función tiempo() calculas la diferencia en ms con final-Date.now().

Para detenerlo, deberás controlar en tu callback tiempo() que se produzca la condición de que la diferencia sea 0 o menor, cambiar el color del display, por ejemplo aplicando una clase al elemento, y parar el interval con clearInterval().

O sea, algo así (he simplificado todo para que se entienda mejor la técnica del tiempo, el display lo tendrás que readaptar a tus necesidades; pasar de milisegundos a segundos.centesimas ya más o menos lo tienes. )

let cronometro = document.getElementById("cronometro");
let final = Date.now() + 60000;
let elcrono = setInterval(tiempo,10); 
function tiempo() {
  let diferencia= final-Date.now();
  let sg = diferencia/1000
  if (diferencia<=0) {
    clearInterval(elcrono);
    cronometro.classList.add('rojo');
    sg=0.0;
  }
  cronometro.innerHTML=sg;
}
.rojo { color:red }
<div id="cronometro"></div>

0

Te dejo otra variante para que tengas en cuenta:

let h1 = document.querySelector("h1");

let centecimos = 0;
let segundos = 60;

function run(){
	if((centecimos == 0) &&( segundos == 0)){
		
		h1.style.color = 'red';
		
	}else{

		if(centecimos == 0){
			--segundos;
			centecimos = 99;
		}else{
			--centecimos;
		}

		h1.innerHTML = segundos +':'+centecimos;

	}
	
}

setInterval(run, 10);
<!DOCTYPE html>
<html>
<head>
	<title>Reloj</title>
</head>
<body>
	<h1>60:00</h1>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.