Scribd Logo
Upload

Welcome to Scribd!

  • Crono 6.4

    Uploaded by

    Carlos Augusto Nole Machaca
    27 views4 pages

    Original Title

    crono 6.4

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    27 views4 pages

    Crono 6.4

    Uploaded by

    Carlos Augusto Nole Machaca

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Cronmetro Digital</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="estilo_crono3.css">
    <!-- cargo la librera zepto.js -->
    <script type="text/javascript" src="zepto.min.js" > </script>
    <!-- cargo la librera touch.js -->
    <script type="text/javascript" src="touch.js" > </script>
    <!-- cargo el script "cronmetro" que contiene el cdigo javascript -->
    <script type="text/javascript" src="cronometro3.js" > </script>
    </head>
    <body>
    <h1>Cronmetro (iCrono)</h1>
    <div id="icrono">
    <div id="b_on_off"> </div>
    <div id="b_resetear"> </div>
    <div id="zona_activa">
    <div id="crono">0.00</div>
    <div id="lista">El cronmetro se ha parado en:</div>
    </div>
    </div>
    </body>
    </html>
    @charset "UTF-8";
    /* CSS Document */
    @font-face {
    font-family: digital;
    src: url(digital.ttf);
    }
    @font-face {
    font-family: digital_ie;
    src: url(digital_ie.eot);
    }
    body {
    background-color:#666;
    color:#666;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    }
    h1 {
    color: #FFF;
    font-size: 1.4em;
    margin-bottom: 10px;
    }
    #icrono {
    background-color:transparent;
    background-image:url(imagenes/i_crono.png);
    width: 428px;
    height: 787px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    }
    #b_on_off {
    position: relative;
    float: left;
    background-color:transparent;
    background-image:url(imagenes/boton_off.png);
    width: 81px;
    height: 81px;
    top: 40px;
    left: 50px;
    z-index: 10;
    }
    #b_resetear {
    position: relative;
    float: right;
    background-color:transparent;
    background-image:url(imagenes/boton_reiniciar.png);
    width: 81px;
    height: 81px;
    top: 40px;
    left: -50px;
    z-index: 10;
    }
    #zona_activa {
    background-color: transparent;
    position: relative;
    clear: both;
    width: 375px;
    height: 558px;
    top: 70px;
    left: 27px;
    z-index: 10;
    }
    #crono {
    position: relative;
    top: 20px;
    margin-left: auto;
    margin-right: auto;
    color: #d4b68e;
    font-family: digital, digital_ie;
    font-size: 80px;
    z-index: 20;
    }
    #lista {
    position: relative;
    top: 44px;
    overflow: auto;
    width: 300px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-size: 1em;
    color:#d4b68e;
    z-index: 20;
    }
    // JavaScript Document
    // creamos la funcin principal
    $(function(){
    /* creamos las variables que controlarn si el cronmetro est en marcha o no (t)
    ,
    el contenedor de los segundos (cl) y el contenedor de la lista de parada
    s (agregar) */
    var t;
    var cl = $("#crono");
    var agregar = $("#lista");
    /* en estas cuatro lneas miramos si existen o no valores almacenados en "l
    ocalStorage" o
    no y los valores que asigna dependiendo de cada caso */
    localStorage.crono = (localStorage.crono || "0.00");
    localStorage.lista = (localStorage.lista || "El cronmetro se ha parado en:
    ");
    cl.html(localStorage.crono);
    agregar.html(localStorage.lista);
    // esta funcin convierte cl en numrica y le suma 0.01; luego formatea el res
    ultado con dos decimales
    function mostrar() {
    cl.html((+cl.html() + 0.01).toFixed(2));
    }
    // esta funcin inicia "setInterval" y ejecuta la funcin "mostrar" cada centsim
    a de segundo
    function arrancar() {
    t=setInterval(mostrar, 10);
    }
    // esta funcin anula "setInterval" con "clearInterval", vaca el valor de "t"
    y aade a la lista de paradas la parada actual; despus asigna valores a "localStorag
    e"
    function parar() {
    clearInterval(t);
    t=undefined;
    agregar.html(agregar.html() + "</br>" + cl.html() + " segundos")
    ;
    localStorage.crono = cl.html();
    localStorage.lista = agregar.html();
    }
    // esta funcin controla si "t" tiene valor o no para ejecutar las
    funciones arrancar o parar y cambiar la imagen del botn
    function cambiar() {
    if (!t) {
    arrancar();
    $("#b_on_off").css("background-image", "url(imagenes/bot
    on_on.png)");
    } else {
    parar()
    $("#b_on_off").css("background-image", "url(imagenes/bot
    on_off.png)");
    }
    }
    /* esta funcin controla que si "t" no tiene valor, "cl" se pone como "0.00
    " y "agregar"
    recobra su valor inicial borrando todas las paradas registradas y asigna
    valores a "localStorage" */
    function resetear() {
    if (!t) {
    cl.html("0.00");
    agregar.html("El cronmetro se ha parado en:");
    localStorage.crono = "0.00";
    localStorage.lista = "El cronmetro se ha parado en:";
    }
    }
    // aqu se crean los eventos tctiles
    $("#zona_activa").on("tap", cambiar);
    $("#b_on_off").on("click", cambiar);
    $("#zona_activa").on("swipe", resetear);
    $("#b_resetear").on("click", resetear);
    });

    You might also like