Inicio Apuntes FPApuntes DAW Cronómetro con botonera en JavaScript

Cronómetro con botonera en JavaScript

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

El ejercicio que voy a dejar hoy se trata de algo que aprendí a hacer todavía el otro día. El ejemplo era un poco más sencillo (pero más vistoso) que lo que he sacado yo. En aquel ejercicio eran necesarias unas imágenes para los números, pero en este ejemplo que voy a colocar por aquí, ya no son necesarias.

Bueno, quiero aclarar que en aquel ejercicio se mostraba la fecha del sistema, la hora, los minutos y los segundos. Quizás en otro momento suba también aquel ejemplo, pero por el momento me voy a limitar a colocar el código de un cronómetro con botonera parar interactuar con el. Todo realizado con JavaScript. La idea de ello viene dada por que un «compi» hizo algo parecido con aquel ejercicio, así que supongo que por ahí ha llegado todo.

Crónometro con botonera realizada en JavaScript

Explicado el ejercicio, vamos al turrón del asunto …

<html>
<head>
<meta charset="UTF-8">
<title>Cronómetro</title>
<style type="text/css">
* { margin: auto;
        padding: 0;
        }
h1 {
        padding: 0.5em;
        text-align: center;
        }
#cronometro { padding:10px;
                          border: 3px silver solid;
                          width: 200px;
              text-align: center;
                }
#reloj { padding: 5px 10px;
                 width: 170px;
                 border: 3px solid black;
         font: bold 1.5em digital, europa, arial;
         text-align: center;
         margin: 4px  
        }
#cronometro [type=button]  {
                                                        margin: 4px;
                                                        font: normal 9pt arial
                                                        }
</style>
 
<script type="text/javascript">
 
window.onload = function() {
                                //localiza en pantalla el reloj y se ronombra visor para trabajar con ello
                                        visor=document.getElementById("reloj");
                                        //asociar eventos a botones: al pulsar el botón se activa su función.
                                        document.cron.empieza.onclick = empezar;
                                        document.cron.para.onclick = parar;
                                        document.cron.continua.onclick = continuar;
                                        document.cron.reinicia.onclick = reiniciar;
                                }
 
//variables de inicio:
var marcha=0; //control del temporizador
var cro=0; //estado inicial del cronómetro.
//cronometro en marcha. Empezar en 0:
 
function empezar() {
         if (marcha==0) { //solo si el cronómetro esta parado
            emp=new Date() //fecha actual
            elcrono=setInterval(tiempo,10); //función del temporizador.
            marcha=1 //indicamos que se ha puesto en marcha.
            }
         }
 
function tiempo() { //función del temporizador
         actual=new Date() //fecha en el instante
         cro=actual-emp //tiempo transcurrido en milisegundos
         cr=new Date() //fecha donde guardamos el tiempo transcurrido
         cr.setTime(cro) //nos da la fecha en milisegundos
         cs=cr.getMilliseconds() //milisegundos del cronómetro
         cs=cs/10; //paso a centésimas de segundo.
         cs=Math.round(cs) //despreciamos los decimales
         sg=cr.getSeconds(); //segundos del cronómetro
         mn=cr.getMinutes(); //minutos del cronómetro
         ho=cr.getHours()-1; //horas del cronómetro
         if (cs<10) {cs="0"+cs;}  //se ponen siempre 2 cifras en los números
         if (sg<10) {sg="0"+sg;}
         if (mn<10) {mn="0"+mn;}
         visor.innerHTML=ho+" : "+mn+" : "+sg+" : "+cs; //pasar a pantalla.
         }
 
//parar el cronómetro
function parar() {
         if (marcha==1) { //sólo si está en funcionamiento
            clearInterval(elcrono); //parar el crono
            marcha=0; //indicar que está parado.
            }          
         }               
 
//Continuar una cuenta empezada y parada.
function continuar() {
         if (marcha==0) { //sólo si el crono está parado
            emp2=new Date(); //fecha actual
            emp2=emp2.getTime(); //pasar a tiempo Unix
            emp3=emp2-cro; //restar tiempo anterior
            emp=new Date(); //nueva fecha inicial para pasar al temporizador
            emp.setTime(emp3); //datos para nueva fecha inicial.
            elcrono=setInterval(tiempo,10); //activar temporizador
            marcha=1; //indicamos que se ha puesto en marcha.
            }          
         }
 
//Volver al estado inicial
function reiniciar() {
         if (marcha==1) { //si el cronómetro está en marcha:
            clearInterval(elcrono); //parar el crono
            marcha=0;   //indicar que está parado
            }
         cro=0; //tiempo transcurrido a cero
         visor.innerHTML = "0 : 00 : 00 : 00"; //se escribe en el visor todo a 0
         }     
</script>
</head>
<body>
<h1>CRONÓMETRO con Javascript</h1>
<hr>
<div id="cronometro">
  <div id="reloj">0 : 00 : 00 : 00</div> <!--cornómetro-->
  <form name="cron" action="#"> <!--botones-->
    <input type="button" value="Empezar" name="empieza" />
    <input type="button" value="Parar" name="para" /><br/>
    <input type="button" value="Continuar" name="continua" />
    <input type="button" value="Reiniciar" name="reinicia" />
  </form>
  <h6>@SapoClay</h6>
</div>
</body>
</html>

 

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.