Cronometro in javascript

Discussione in 'Snippet Javascript' iniziata da criric, 18 Agosto 2013.

  1. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Ciao, ragazzi vi posto un cronometro in javascript, ho usato jquery per comodita ma si potrebbe tranquillamente modificare
    si avvia e si ferma con un qualsiasi tasto
    HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Cronometro</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                var start = "00:00.00";
                var go = false;
                var speed = 10;
                var a,b,c,d,e,f,u;
                $(document).keypress(function(){
                    if(go == false) {
                        start = "00:00.00";
                        cnt = setInterval(function() {
                            gostart();
                        },speed);
                    }else{
                        go = false;
                        clearInterval(cnt);
                    }
                })
                function gostart(){
                    go = true;
                    a = parseInt(start.charAt(0));
                    b = parseInt(start.charAt(1));
                    u = ":";
                    c = parseInt(start.charAt(3));
                    d = parseInt(start.charAt(4));
                    e = ".";
                    f = parseInt(start.charAt(6));
                    g = parseInt(start.charAt(7));
                    if(g >= 9) {
                        g = 0;
                        if(f >= 9) {
                            f = 0;
                            if(d >= 9) {
                                d = 0;
                                if(c >= 5) {
                                    c = 0;
                                    if(b >= 9) {
                                        b = 0;
                                        if(a >= 9) {
                                            clearInterval(cnt);
                                        }else{
                                            a++;
                                        }
                                    }else{
                                        b++;
                                    }
                                }else{
                                    c++;
                                }
                            }else{
                                d++;
                            }
                        }else{
                            f++;
                        }
                    } else {
                        g++;
                    }
                    start = String(a) + String(b) + String(u) + String(c) + String(d) + String(e) + String(f) + String(g);
                    for ( var i = 0; i < start.length; i++ ) {
                        $("#s" + i).html(start.charAt(i))
                    }
                }
            </script>
            <style type="text/css">
                html body {
                    text-align: center;
                    background-color: #000;
                }
                div#counter {
                    margin:auto;
                    margin-top:100px;
                    background-color: #000;
                    color: gold;
                    font-weight: bold;
                    padding:6px;
                    width: 100%;
                    font-size: 150px;
                    text-align: center;
                }
                div#counter div {
                    padding:6px;
                }
            </style> 
        </head>
        <body>
            <div id="counter">
                <span id="s0">0</span>
                <span id="s1">0</span>
                <span id="s2">:</span>
                <span id="s3">0</span>
                <span id="s4">0</span>
                <span id="s5">.</span>
                <span id="s6">0</span>
                <span id="s7">0</span>
            </div> 
        </body>
    </html>
    
    il trucco è tutto nelle funzioni setInterval() e clearInterval()
    non ho creato un esempio online: basta il copia e incolla
    non ho commentato, se avete bisogno chiedete pure
     
Sto caricando...

Condividi questa Pagina