index.html

<!--
* Progetto "Ora Esatta" - HTML/JavaScript 
* Data ultima modifica: 07/12/2019 
 -->

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8"/>
        <title>Ora Esatta</title>
        <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
        <style type="text/css">
            div {
                font-family: 'Arimo', sans-serif;
                font-size: 72px;
                height: 200px;
                width: 400px;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -140px;
                margin-left: -200px;
            }
            
            p {
                font-family: 'Arimo', sans-serif;
            }
        </style>
        
        <script type="text/javascript">
            var orario;
            var ora;
            var minuto;
            var secondo;
            var avantiAvviato = false;

            function cercaOrario() {
                try {
                    orario = new Date();
                    // Inizio interpretazione orario
                    ora = orario.getHours();
                    minuto = orario.getMinutes();
                    secondo = orario.getSeconds();
                    var strOra = ora.toString();
                    var strMinuto = minuto.toString();
                    var strSecondo = secondo.toString();
                    if (parseInt(strOra) < 10)
                        strOra = "0" + strOra;
                    if (parseInt(strMinuto) < 10)
                        strMinuto = "0" + strMinuto;
                    if (parseInt(strSecondo) < 10)
                        strSecondo = "0" + strSecondo;
                    // Fine interpretazione orario
                    document.getElementById("visualizzatoreOrario").innerHTML = "<strong><center><p>" + strOra + ":" + strMinuto + ":" + strSecondo + "</p></center></strong>";
                    if (avantiAvviato == false) {
                        avantiAvviato = true;
                        avantiOrario();
                    }
                    setTimeout(cercaOrario, 60000);
                } catch (err) {
                    console.log("Errore: " + err);
                }
            }

            function avantiOrario() {
                try {
                    if (secondo == 59) {
                        if (minuto == 59)
                            ora = (ora + 1) % 24;
                        minuto = (minuto + 1) % 60;
                    }
                    secondo = (secondo + 1) % 60;
                    var strOra = ora.toString();
                    var strMinuto = minuto.toString();
                    var strSecondo = secondo.toString();
                    if (parseInt(strOra) < 10)
                        strOra = "0" + strOra;
                    if (parseInt(strMinuto) < 10)
                        strMinuto = "0" + strMinuto;
                    if (parseInt(strSecondo) < 10)
                        strSecondo = "0" + strSecondo;
                    document.getElementById("visualizzatoreOrario").innerHTML = "<strong><center><p>" + strOra + ":" + strMinuto + ":" + strSecondo + "</p></center></strong>";
                    setTimeout(avantiOrario, 1000);
                } catch (err) {
                    alert(err);
                }
            }
        </script>
    </head>
    
    <body style="background-color: whitesmoke" onload="cercaOrario()">
        <noscript>
            <p>
                Se l'orario non viene visualizzato entro pochi secondi, verifica che Javascript sia abilitato e
                supportato.
            </p>
        </noscript>
        <div id="visualizzatoreOrario"></div>
    </body>
</html>