Esta aplicación web, es un cronometro sencillo que se ejecuta en le navegador con el cual puedes medir el tiempo que tardas en ejecutar alguna acción. La operación del cronometro es muy sencilla, tiene un botón para iniciar y otro para detener el tiempo. puedes reiniciar el tiempo desde cero presionando F5 o dar dos clics en el botón iniciar.
Descripción
La interfaz es muy sencilla solo hay dos botones para operarlo uno para iniciar el cronometro y otro para detenerlo.
Para reiniciarlo solo hay que presionar el botón iniciar dos veces.
Código
Para el código, utilizamos tres tipos de scripts, para la interfaz utilizamos HTML, para darle formato utilizamos CSS y para la logica utilizamos JavaScript.
Código HTML
<!DOCTYPE html>
<html>
<head>Cronometro</head>
<body>
<center><div><h1>Cronometro</h1></div></center>
<br><br>
<div class="contenedor">
<div class="separador"> </div>
<div class="minutos"><label id="min">00</label></div>
<div class="puntos">:</div>
<div class="segundos"><label id="seg">00</label></div>
<div class="separador"> </div>
<div class="separador"> </div>
<button class="control" onclick="inicio()">Inicio</button>
<div class="separador"> </div>
<button class="control" onclick="pausa()"><label id="btn1">Detener</label></button>
<div class="separador"> </div>
</div>
</body>
</html>
El codigo HTML es muy sencillo utilizamos las instrucciones div para crear un grid y poder acomodar todos los elementos, les asignamos una clase a cada elemento para poder darles un mejor formato y con la instruccion onclick ejecutamos la funcion correspondiente.
código CSS
<style type="text/css">
.contenedor{
display: grid;
grid-template-columns: repeat(5,1fr);
text-align: center;
gap: 5px;
}
.minutos{
font-size: 80px;
font-family: monospace;
height: 100px;
}
.segundos{
font-size: 80px;
font-family: monospace;
height: 100px;
}
.puntos{
font-size: 80px;
font-family: monospace;
height: 100px;
}
.control{
font-size: 30px;
font-family: monospace;
}
</style>
En esta parte del codigo le damos un mejor haspecto al programa, como por ejemplo cambiar el tamaño y tipo de letra o el color de fondo.
codigo JavaScript
<script>
let timer;
let minuto = 0;
let segundo = 0;
let cont = 0;
const tiempo = 1000;
function inicio(){
cont ++;
if (cont == 1){
timer = setInterval(()=>{
segundo ++;
document.getElementById('seg').innerHTML = segundo;
if(segundo >= 59){
segundo = 0;
minuto ++;
document.getElementById('min').innerHTML = minuto;
}
},tiempo);
}
if (cont >= 2){
minuto = 0;
segundo = 0;
cont = 0;
document.getElementById('seg').innerHTML = "00";
document.getElementById('min').innerHTML = "00";
clearInterval(timer);
}
}
function pausa(){
clearInterval(timer);
document.getElementsById('bnt1').innerHTML = "Reanudar";
}
</script>
Por ultimo en el codigo de JavaScript controlamos la logica del programa, aqui es donde definimos las funciones que realizaran los botones al ser precionados, en este caso creamos una funcion llamada inicio para iniciar el conteo del tiempo y otra funcion llamada pausa para detener el reloj.
No hay comentarios.:
Publicar un comentario