JavaScript - Varios temporizadores en html

 
Vista:

Varios temporizadores en html

Publicado por Miguel (1 intervención) el 03/05/2017 17:35:56
Saludos a todos los participantes del foro, les paso una consulta, actualmente estoy tratando de aprender html5+css3+javascript. Se me ocurrio la idea de practicar con una web que tenga varios botones que activan distintos temporizadores, la idea es que abajo de cada boton muestre una cuenta progresiva HH:MM la verdad que no se bien los limites posibles con setInterval y setTimeout, tengo un arreglo que identifica cada boton, la idea era tener 2 campos por boton 1 que actue como bandera para saber si se activo o no dicho boton y el otro campo era un segundero entonces yo con setInterval cada segundo iba sumando los sgundos del boton correspondiente y si llegaba a 60 realizaba las sumas correspondientes, de minutos y hora si era necesario pero se tilda todo, luego intente usando el setTimeout cada 60000 milisegundo (se volveria a lanzar con el mismo parametro) que directamente realice la suma y me pasa lo mismo, no se si tengo que bajar una libreria en especial para poder trabajar con todo esto, no se si tiene restricciones especiales estas funciones que no me permite llamarla varias veces. Alguien intento hacer algo similar?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de ScriptShow
Val: 1.574
Plata
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Varios temporizadores en html

Publicado por ScriptShow (658 intervenciones) el 05/05/2017 14:38:46
Saludos Miguel,

a ver si te sirve:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script type="text/javascript">
<!--
sCount1=00;
mCount1=00;
tCount1=null;

function startCount1(){
document.getElementById("yCount1").innerHTML=mCount1 +":"+ sCount1;
if (sCount1 <= 60){
sCount1++;
sCount1=checkCero(sCount1);
}
if (sCount1 >= 60){
mCount1++;
sCount1="0"+"0";
mCount1=checkCero(mCount1);
}
tCount1=setTimeout("startCount1()",1000);
}

sCount2=00;
mCount2=00;
tCount2=null;

function startCount2(){
document.getElementById("yCount2").innerHTML=mCount2 +":"+ sCount2;
if (sCount2 <= 60){
sCount2++;
sCount2=checkCero(sCount2);
}
if (sCount2 >= 60){
mCount2++;
sCount2="0"+"0";
mCount2=checkCero(mCount2);
}
tCount2=setTimeout("startCount2()",1000);
}

function checkCero(i){
if (i<10){i="0"+i}
return i;
}
//-->
</script>
<style type="text/css">  
<!--
fieldset {display:inline;width:140px;height:140px;font-family:sans-serif;text-align:center;color:#000000}
input {background:#FFFFFF;border:1px solid #000000}
//-->
</style>
<hr color="#000000" size="10" noshade>
<p>
<fieldset>
<legend id="nCount1">Crono 1</legend>
<div id="yCount1" style="font-size:40px">00:00</div>
<br><br>
<input type="button" value="Start" onClick="clearTimeout(tCount1);startCount1()">
<input type="button" value="Stop" onClick="clearTimeout(tCount1)">
</fieldset>
<fieldset>
<legend id="nCount2">Crono 2</legend>
<div id="yCount2" style="font-size:40px">00:00</div>
<br><br>
<input type="button" value="Start" onClick="clearTimeout(tCount2);startCount2()">
<input type="button" value="Stop" onClick="clearTimeout(tCount2)">
</fieldset>
</p>
<hr color="#000000" size="10" noshade>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 3
Ha aumentado su posición en 19 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Varios temporizadores en html

Publicado por Fabian (1 intervención) el 13/10/2018 06:06:57
Hola
Aprovecho este tema, ya que los relojes son los que necesito, no tengo experiencia en js estoy construyendo una página, actualiza automático en lapsos cortos, sería interesante colocar un único reloj digital de minutos y segundos como los que contienen este código (sin start stop) pero con cuenta regresiva que arranque cuando se actualiza la página. El tiempo lo cambiaría desde el código según la frecuencia que necesite, un día puedo necesitar que el bucle sea de 1 minuto y otro de 5 ó 10 (por ejemplo), obviamente para saber cuanto falta para la actualización de la página, aunque parece algo estéril, sirve para no estar actualizando manualmente ya que se puede ver cuanto falta para la misma, cualquier código se agradece. Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar