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

<!DOCTYPE html>

<html>
    <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>
    </head>
    
    <body style="background-color: whitesmoke">
        <noscript>
            <p>
                Se l'orario non viene visualizzato entro pochi secondi, verifica che Javascript sia abilitato e supportato.
            </p>
        </noscript>
        <div id="visualizzatoreOrario"></div>
        <script type="text/javascript">
            var orario;
            var ora;
            var minuto;
            var secondo;
            var avantiAvviato = false;
            function cercaOrario() {
                try{
                    xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("HEAD", "http://time1.google.com", true);
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4) {
                            orario = new Date(xmlhttp.getResponseHeader("Date")) - (new Date());
                            orario = Math.abs(parseInt(orario));
                            orario = new Date(orario);
                            // 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;
                            document.getElementById("visualizzatoreOrario").innerHTML = "<strong><center><p>" + strOra + ":" + strMinuto + ":" + strSecondo + "</p></center></strong>";
                            // Fine interpretazione orario
                            if (avantiAvviato == false) {
                                avantiAvviato = true;
                                avantiOrario();
                            }
                            setTimeout(cercaOrario, 60000);
                        }
                    }
                    try{
                        xmlhttp.send();
                    }
                    catch (err) {
                        console.error(err);
                    }

                }
                catch (err) {
                    alert("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);
                }
            }
            cercaOrario();
        </script>
    </body>
</html>