E - Cronómetro

ejercicio 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

d 003 cronometro

Visitas...

Hoy ........ 0

Ayer ....... 0

Mes ........ 72

Total ........ 5726

En línea...

Hay 12 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS