Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Cronometro con vueltas

Estas en el tema de Cronometro con vueltas en el foro de Javascript en Foros del Web. Buen día. He ido desarrollando poco a poco un cronometro, llegue a un punto donde me quede. Qusiera que al oprimir el boton parcial, no ...
  #1 (permalink)  
Antiguo 03/11/2014, 11:47
Avatar de davincci  
Fecha de Ingreso: enero-2005
Mensajes: 193
Antigüedad: 19 años, 5 meses
Puntos: 0
Cronometro con vueltas

Buen día.

He ido desarrollando poco a poco un cronometro, llegue a un punto donde me quede.

Qusiera que al oprimir el boton parcial, no solo aparezca el tiempo tomado como lo hace, si no que a su vez pueda ir guardando temporalmente en variables hasta que termine y que al final, cuando pare muestre todos los tiempos parciales tomados temporalmente, agradezco mucho su ayuda, este es el codigo:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
var CronoID = null
var CronoEjecutandose = false
var decimas, segundos, minutos

function DetenerCrono (){
       if(CronoEjecutandose)
               clearTimeout(CronoID)
       CronoEjecutandose = false
}

function InicializarCrono () {
       //inicializa contadores globales
       decimas = 0
       segundos = 0
       minutos = 0

       //pone a cero los marcadores
       document.crono.display.value = '00:00:0'
       document.crono.parcial.value = '00:00:0'
}

function MostrarCrono () {

       //incrementa el crono
       decimas++
       if ( decimas > 9 ) {
               decimas = 0
               segundos++
               if ( segundos > 59 ) {
                       segundos = 0
                       minutos++
                       if ( minutos > 99 ) {
                               alert('Fin de la cuenta')
                               DetenerCrono()
                               return true
                       }
               }
       }

       //configura la salida
       var ValorCrono = ""
       ValorCrono = (minutos < 10) ? "0" + minutos : minutos
       ValorCrono += (segundos < 10) ? ":0" + segundos : ":" + segundos
       ValorCrono += ":" + decimas

       document.crono.display.value = ValorCrono

       CronoID = setTimeout("MostrarCrono()", 100)
       CronoEjecutandose = true
       return true
}

function IniciarCrono () {
       DetenerCrono()
       InicializarCrono()
       MostrarCrono()
}

function ObtenerParcial() {
       //obtiene cuenta parcial
       document.crono.parcial.value = document.crono.display.value
}




</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRONOMETRO</title>
</head>

<body>
<p align="center">CRONOMETRO</p>
<div align="center">
 <!-- Para visualizar el cronómetro -->
</div>
<div class="recuadro3">
<form name="crono">
<p align="center"><input type="text" size="8" name="display" value="00:00:0"> <input type="button" name="Iniciar" value=" Iniciar " onClick="IniciarCrono()"></p>
<p align="center"><input type="text" size="8" name="parcial" value="00:00:0 "> <input type="button" name="Parcial" value="Parcial" onClick="ObtenerParcial()"></p>
<p align="center"><input type="button" name="Parar" value=" Parar " onClick="DetenerCrono()"> <input type="button" name="Cero" value="  Cero  " onClick="DetenerCrono(); InicializarCrono()"></p>
</form>
</div>



</body>
</html> 
__________________
Mil gracias por sus enseñanzas.

Davincci
  #2 (permalink)  
Antiguo 03/11/2014, 21:27
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 4 meses
Puntos: 21
Respuesta: Cronometro con vueltas

Te paso un ejemplo muy sencillo. Se puede mejorar mucho. Cualquier cosa preguntas.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <script language="javascript" type="text/javascript">
  4. var CronoID = null
  5. var CronoEjecutandose = false
  6. var decimas, segundos, minutos
  7. var index = 1;
  8. var parciales = [];
  9.  
  10. function DetenerCrono (){
  11.        if(CronoEjecutandose)
  12.                clearTimeout(CronoID)
  13.        CronoEjecutandose = false
  14.  
  15.  
  16.        var table = document.getElementById('parciales');
  17.        index = 0;
  18.        table.innerHTML = '';
  19.        var row = "";
  20.        for(var i = 0; i < parciales.length; i++) {
  21.         row += '<tr>';
  22.             row += '<td>';
  23.                 row +=  parciales[i]['id'];
  24.             row += '</td>';
  25.             row += '<td>';
  26.                 row +=  parciales[i]['parcial'];
  27.             row += '</td>';
  28.         row += '</tr>';
  29.        }
  30.  
  31.        table.innerHTML = row;
  32.  
  33.        parciales = [];
  34. }
  35.  
  36. function InicializarCrono () {
  37.        //inicializa contadores globales
  38.        decimas = 0
  39.        segundos = 0
  40.        minutos = 0
  41.  
  42.        //pone a cero los marcadores
  43.        document.crono.display.value = '00:00:0'
  44.        document.crono.parcial.value = '00:00:0'
  45. }
  46.  
  47. function MostrarCrono () {
  48.  
  49.        //incrementa el crono
  50.        decimas++
  51.        if ( decimas > 9 ) {
  52.                decimas = 0
  53.                segundos++
  54.                if ( segundos > 59 ) {
  55.                        segundos = 0
  56.                        minutos++
  57.                        if ( minutos > 99 ) {
  58.                                alert('Fin de la cuenta')
  59.                                DetenerCrono()
  60.                                return true
  61.                        }
  62.                }
  63.        }
  64.  
  65.        //configura la salida
  66.        var ValorCrono = ""
  67.        ValorCrono = (minutos < 10) ? "0" + minutos : minutos
  68.       ValorCrono += (segundos < 10) ? ":0" + segundos : ":" + segundos
  69.       ValorCrono += ":" + decimas
  70.  
  71.       document.crono.display.value = ValorCrono
  72.  
  73.       CronoID = setTimeout("MostrarCrono()", 100)
  74.       CronoEjecutandose = true
  75.       return true
  76. }
  77.  
  78. function IniciarCrono () {
  79.       DetenerCrono()
  80.       InicializarCrono()
  81.       MostrarCrono()
  82. }
  83.  
  84. function ObtenerParcial() {
  85.       //obtiene cuenta parcial
  86.       document.crono.parcial.value = document.crono.display.value
  87.  
  88.       parciales.push({
  89.         'id' : index,
  90.         'parcial' : document.crono.display.value
  91.       });
  92.  
  93.       index++;
  94. }
  95.  
  96.  
  97.  
  98.  
  99.  
  100. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  101. <title>CRONOMETRO</title>
  102. </head>
  103.  
  104. <p align="center">CRONOMETRO</p>
  105. <div align="center">
  106.  <!-- Para visualizar el cronómetro -->
  107. </div>
  108. <div class="recuadro3">
  109. <form name="crono">
  110. <p align="center"><input type="text" size="8" name="display" value="00:00:0"> <input type="button" name="Iniciar" value=" Iniciar " onClick="IniciarCrono()"></p>
  111. <p align="center"><input type="text" size="8" name="parcial" value="00:00:0 "> <input type="button" name="Parcial" value="Parcial" onClick="ObtenerParcial()"></p>
  112. <p align="center"><input type="button" name="Parar" value=" Parar " onClick="DetenerCrono()"> <input type="button" name="Cero" value="  Cero  " onClick="DetenerCrono(); InicializarCrono()"></p>
  113. </form>
  114. </div>
  115.  
  116.  
  117.     <thead>
  118.         <tr>
  119.             <th>ID</th>
  120.             <th>PARCIAL</th>
  121.         </tr>
  122.     </thead>
  123.     <tbody id="parciales">
  124.     </tbody>
  125.  
  126.  
  127.  
  128. </body>
  129. </html>
__________________
_
  #3 (permalink)  
Antiguo 04/11/2014, 06:02
Avatar de davincci  
Fecha de Ingreso: enero-2005
Mensajes: 193
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Cronometro con vueltas

Excelente, hay opcion que se pueda ver los parciales automaticos sin necesidad de esperar a tomar el ultimo y parar el cronometro para verlos todos?.
__________________
Mil gracias por sus enseñanzas.

Davincci

Etiquetas: cronometro, html, input, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:00.