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