Cronometro in javascript

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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
 
Autore Discussioni simili Forum Risposte Data
I PHP 7
P Javascript 7
C PHP 1
C PHP 6
G Programmazione 0