E - Cronómetro
Este ejercicio consiste en un sencillo script para crear un cronómetro responsive en una página Web.
Añadiendo algunas reglas CSS básicas y tres botones lo dotamos de mayor funcionalidad.
Para realizar el script hemos utilizado los métodos del objeto window setInterval() y clearInterval() para controlar el tiempo.
Código JavaScript
// ========================================
// Código JavaScript
// CRONÓMETRO CENTESIMAL
// (cc) 2017, 3con14.pro
// ========================================
var i = 0;
var Iniciar;
function Crono() {
i++;
var Cen = i;
var iCen = Cen % 100;
var iSeg = Math.round((Cen - 50) / 100);
var iMin = Math.round((iSeg - 30) / 60);
iSeg = iSeg % 60;
var sCen = "" + ((iCen > 9) ? iCen : "0" + iCen);
var sSeg = "" + ((iSeg > 9) ? iSeg : "0" + iSeg);
var sMin = "" + ((iMin > 9) ? iMin : "0" + iMin);
contador.innerHTML = (sMin + ":" + sSeg + ":" + sCen);
}
function IniciarCrono() {
PararCrono();
contador.innerHTML = ("00:00:00");
}
function EncenderCrono() {
if (i !== 0) { return; }
Iniciar = setInterval(Crono, 10);
}
function PararCrono() {
clearInterval(Iniciar);
i = 0;
}
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="(cc) 3con14" />
<link rel="stylesheet" href="/css/estilos.css">
<title>TAREA D_003 - Cronómetro</title>
</head>
<body>
<div id="botones">
<button onclick="EncenderCrono();">Encender</button>
<button onclick="PararCrono();">Parar</button>
<button onclick="IniciarCrono();">Reiniciar</button>
</div>
<div id="contador">00:00:00</div>
<script src="/js/codigo.js"></script>
</body>
</html>
Reglas CSS
/* ========================================
// Hoja de estilos CSS
// CRONÓMETRO RESPONSIVE
// (cc) 2017, 3con14.pro
============================================ */
* {
box-sizing:border-box;
margin: 0;padding: 0;
}
:focus { outline: 0; }
body {
min-height: 100vh;
background-color: steelblue;
font-size: 20vw;
position: relative;
}
#contador {
position: absolute;
top: calc(50vh - 10vw);
left: calc(50vw - 38vw);
max-width: 100vw;
}
#botones {
position: absolute;
top: 0;
left: 0;
font-size: 1rem;
padding: 1em;
}
button {
border: 0;
padding: 0.2em 0.5em;
margin-right: 0.5em;
font-size: 100%;
}
button:hover {
cursor: pointer;
box-shadow: 0 0 10px 2px #f33;
}
button:focus {
box-shadow: 0 0 10px 2px #0f0;
}
button:active {
box-shadow: 0 0 10px 2px #f33 inset;
}
Demo
