3,3Mil
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>
