Orologio php+js

27-08-2010, 23.15.11

Innanzi tutto ciao a tutti e grazie in anticipo a chi mi darà una mano...
il mio problema è questo:
Sto cercando di fare un orologio in js che mostri anche lo scorrimento dei secondi...naturalmente utilizzando solo js mi funziona ma viene visualizzata l'ora impostata sul pc del visitatore,io voglio che si visualizzi l'ora del server...ecco perchè ho mescolato del php nel codice js,purtroppo però nonostante mi si visualizzi l'ora del server i secondi non scorrono...(

) ; posto il codice:
questo è il codice html per fare la casella text all'interno della quale si visualizza l'ora:

Codice HTML:

<form name="Orologia">
<input type="text" name="Orologi" onstartselect="return false;" onfocus="this.blur()"></form>

quest'altro è il codice js+php:

Codice HTML:

<script>
var orario = '<? echo date("F d, Y H:i:s"); ?>'
function Orologio() { var data = new Date(orario);
var ora = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
parseInt(min) < 10 ? min = "0" + min : null;
parseInt(sec) < 10 ? sec = "0" + sec : null;
document.Orologia.Orologi.value = ora + ":" + min + ":" + sec;
setTimeout("Orologio", 1000);
}</script>



<body onload="Orologio();">

come devo fare ad avere l'ora del server e anche lo scorrimento dei secondi?

**karl94** · 28-08-2010, 14.35.37

Metti questo nell'head

Codice HTML:

<script type="text/javascript">
    //<[CDATA[
    addEventListener("load", function(){
        var diff = <?=time()*1000?>-Date.now();
        var el = document.getElementById("orologio");
        setInterval(function(){
            var time = new Date(Date.now()+diff);
            var hours = time.getHours().toString();
            var minutes = time.getMinutes().toString();
            var seconds = time.getSeconds().toString();
            if(hours.length == 1){
                hours = "0"+hours;
            }
            if(minutes.length == 1){
                minutes = "0"+minutes;
            }
            if(seconds.length == 1){
                seconds = "0"+seconds;
            }
            el.textContent = hours+":"+minutes+":"+seconds;
        }, 1000);
    }, false);
    //]]>
</script>

e l'ora verrà visualizzata nell'elemento con id impostato su orologio, per esempio

Codice HTML:

<span id="orologio"></span>

**dementialsite** · 28-08-2010, 14.36.22

Il tuo errore è che alla fine della funzione Orologio() richiami correttamente la funzione stessa, ma all'inizio reimposti sempre la stessa ora... Prova così:

- sposta la prima riga della funzione al di fuori della funzione stessa (il posto migliore sarebbe mettendolo dentro un elemento <script>...</script>, insieme all'inizializzazione via server, subito prima del tag di chiusura </body>, in modo che il ritardo sia minore possibile)
- aggiungi questa riga prima della chiamata a setTimeout():

Codice:

data.setSeconds (data.getSeconds () + 1));

Stammi bene...

28-08-2010, 17.35.53

ma purtroppo l'orologio si rifiuta di scorrere i secondi...
ho provato con lo script di karl94,ma non funziona prprio...se invece sposto il date() fuori dalla funzione e metto questo codice:

Codice:

data.setSeconds (data.getSeconds()+1);

prima di settimeout, non cambia nulla...

come cavolo devo fare?! ho provato con setInterval al posto di settimeout,ho provato a scpostare tutto lo spostabile dalla funzione in quseto modo:

Codice HTML:

<form name="Orologia"><input type="text" name="Orologi" onstartselect="return false;" onfocus="this.blur()"></form>
<script>
var orario = '<? echo date("F d, Y H:i:s"); ?>'
var data = new Date(orario);
var ora = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
function Orologio() {
parseInt(min) < 10 ? min = "0" + min : null;
parseInt(sec) < 10 ? sec = "0" + sec : null;
document.Orologia.Orologi.value = ora + ":" + min + ":" + sec;
data.setSeconds (data.getSeconds()+1);

setInterval("Orologio()", 1000);

}</script>
<body onload="Orologio()">

ma non parte...avreste qualche altro sugerimento?

**dementialsite** · 28-08-2010, 18.32.35

Ehm... dovevi spostare solo la creazione dell'oggetto Date, non anche l'estrazione delle variabili ora, min e sec... rimetti queste tre dentro la funzione, dovrebbe così fare quello che ti serve...

Stammi bene...

**karl94** · 28-08-2010, 18.50.02

Originalmente inviato da ALFRAN

ma purtroppo l'orologio si rifiuta di scorrere i secondi...
ho provato con lo script di karl94,ma non funziona proprio...

A me funziona, sei sicuro di aver seguito le mie indicazioni?

29-08-2010, 19.44.51

Originalmente inviato da dementialsite

Ehm... dovevi spostare solo la creazione dell'oggetto Date, non anche l'estrazione

delle variabili ora, min e sec... rimetti queste tre dentro la funzione, dovrebbe così fare quello che ti serve...

Stammi bene...

XD l'esempio che ho messo è uno dei tanti tentativi di far partire l'orologio,ho fatto come hai detto tu,(il risultato lo vedi QUI) cioè con questo codice:

Codice HTML:

<form name="Orologia"><input type="text" name="Orologi" onstartselect="return false;" onfocus="this.blur()"></form>
<script>
var orario = '<? echo date("F d, Y H:i:s"); ?>'
var data = new Date(orario);
function Orologio() { 
var ora = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
parseInt(min) < 10 ? min = "0" + min : null;
parseInt(sec) < 10 ? sec = "0" + sec : null;
document.Orologia.Orologi.value = ora + ":" + min + ":" + sec;
data.setSeconds (data.getSeconds () + 1);
setTimeout("Orologio", 1000);
}</script>

ma non

funziona, perciò ho provato
a togliere dalla funzione anche le tre variabili che facevano capo a Date()....e,come ho già scritto,non funzionava nemmeno così...

Originalmente inviato da karl94

A me funziona, sei sicuro di aver

seguito le mie indicazioni?

karl,ho seguito le tue istruzioni,e non parte niente

Ps.:ho clickato sul link,e sembra che nemmeno a te parta

XD comincio a pensare che il problema sia il broswer

(anche se non credo...vi metto i link,magari sl su ie nn parte
QUI
)

**karl94** · 29-08-2010, 20.23.05

Originalmente inviato da ALFRAN

karl,ho seguito le tue istruzioni,e non parte niente

Ps.:ho clickato sul link,e sembra che nemmeno a te parta

XD comincio a pensare che il problema sia il broswer

(anche se non credo...vi metto i link,magari sl su ie nn parte
QUI
)

Sì, è colpa (tanto per cambiare...) di Internet Explorer, sembra che non conosca il metodo addEventListener.

29-08-2010, 20.43.00

grazie per l'aiuto, karl(KE PALLE QUESTO IE!

)

**alemoppo** · 30-08-2010, 01.38.37

Ho ritrovato un vecchio script che avevo fatto anni fa e che lo utilizzavo per il mio sito:

Codice PHP:


<script language="javascript">
    var data = new Date();
    data.setTime(<?php echo time()*1000; ?>);
    function orologio()
    {
        document.getElementById('orologio').innerHTML = data.getDate()+"/"+(data.getMonth()+1)+"/"+data.getFullYear()+" - "+data.getHours()+"."+data.getMinutes()+"."+data.getSeconds();
        data.setTime(data.getTime()+1000)
        setTimeout("orologio();",1000);
    }
    orologio();
</script>

...rileggendolo velocissimamente una riga si e 2 no

ho notato che andrebbe un po modificato... ad esempio andrebbe eliminato il language="javascript" e aggiunto type="text/javscript"

Il richiamo di orologio() andrebbe fatto onLoad....

Non sarebbe male eliminare l'echo e utilizzare il tag <?= [..] ?>

Comunque vedi se quel script può esserti utile...

--
ovviamente adesso nel mio sito c'é un orologio molto peggiore di questo che si aggiorna ogni minuto dal server... pensavo di avero fatto chissà cosa, invece alla fine era meglio quello vecchio

vabbè,

Ciao!

30-08-2010, 17.47.44

grazie tanto per l'aiuto raga,sono finalmente riuscito a far partire il detestato orologio...ringrazio tutti per l'aiuto,specialmente alemoppo,comunque posto il codice per ottenere l'orologio con scorrimento di secondi sia da IE che da firefox..:

Codice HTML:

<script>
    var data = new Date();
    data.setTime(<? echo time()*1000; ?>);
    function orologio()
    {

var ora = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
if(ora<10){ ora= "0"+ora;}
if(min<10){ min= "0"+min;}
if(sec<10){ sec= "0"+sec;}
        document.getElementById('orologio').innerHTML = data.getDate()+"/"+(data.getMonth()+1)+"/"+data.getFullYear()+" - "+ora+":"+min+":"+sec;
        data.setTime(data.getTime()+1000)
        setTimeout("orologio();",1000);
    }
    
</script><body onload="orologio()">
<div id="orologio"></div>

Discussione: Orologio php+js

LinkBack

Strumenti discussione

Display

Orologio php+js

Grazie per l'aiuto ragazzi...

xD

che tu sia benedetto,alemoppo

Tags for this Thread

Regole di scrittura