[java script] creare countdown

Sethrian · 18-10-2006, 22:43

Ciao ragazzi,
sapreste dirmi come posso creare un countdown in javascript?

Io ho i dati nel database giorni-ore-minuti-sercondi come posso fare?

Ho provato alcuni script già pronti, ma non riesco a sistemarli per le mie esigenze.

Aspetto fiducioso una vostra risposta, Saluti.

Sethrian · 18-10-2006, 22:49

Allora ho trovato questo script in giro per la rete

Codice:

<script>
    var seconds = "PRENDO I SECONDI DAL DB";

    function $(id) {
      return document.getElementById(id);
    }

    function addOnload(f) {
        var prev = window.onload;
        window.onload = function() {
            if (prev) prev();
            f();
        }
    }


    function writecounter(hh, mm, ss) {
        $('ore').value = (hh < 10)? "0"+hh : hh;
        $('min').value = (mm < 10)? "0"+mm : mm;
        $('sec').value = (ss < 10)? "0"+ss : ss;
    }


    function startcount() {
    
        hh = Math.floor(seconds / 3600);
        mm = Math.floor((seconds - (hh*3600)) / 60);
        ss = seconds - (hh*3600) - (mm*60);
        writecounter(hh, mm, ss);
        seconds--;
        if (seconds != -1) {
        setTimeout('startcount()', 1000)
        }
        else {
        // fai qualcosa
        alert("ho finito!");
        }

    }


    var hh = Math.floor(seconds / 3600);
    var mm = Math.floor((seconds - (hh*3600)) / 60);
    var ss = seconds - (hh*3600) - (mm*60);
    
    
    addOnload(startcount);
</script>

<body>

    <form>
    <input type="text" size="2" id="ore" readonly="readonly" /> :
    <input type="text" size="2" id="min" readonly="readonly" /> :
    <input type="text" size="2" id="sec" readonly="readonly" />
    </form>

    <script>
    writecounter(hh, mm, ss);
    </script>

</body>

Io in questa materia mi ritengo ingnorante per cui mi affido a voi.
In pratica lo devo inserire in un gioco tipo ogame, uno script mi inserisce i secondi nel db in modo randomico, e poi il javascript prende i secondi e mi fà il countdown, tutto funziona. Però siccome lo script parte quando viene aggiornata la pagina, ogni volta che un utente và nella pagina dello script lui riparte dai secondi che ci sono nel database.

Ora dovrei inserire un controllo che non permetta ciò.

Ho provato con un $_GET['linked=2'] solo che aggiornando la pagina sparisce tutto.. Come potrei fare?

In pratica funziona in questo modo.
io inserisco delle coordinate e clicco su "Invia" e và sulla pagina che inserisce i dati nel database poi un refresh tramite java riporta l'utente alla pagina iniziale e lo script parte solo che senza un controllo ogni volta che aggiorna la pagina il timer riparte dai secondi iniziali..

Spero di essere stato molto esplicito, confido in voi. Saluti.

-fidel- · 19-10-2006, 00:06

Quote:

Originariamente inviato da Sethrian

In pratica funziona in questo modo.
io inserisco delle coordinate e clicco su "Invia" e và sulla pagina che inserisce i dati nel database poi un refresh tramite java riporta l'utente alla pagina iniziale e lo script parte solo che senza un controllo ogni volta che aggiorna la pagina il timer riparte dai secondi iniziali..

Spero di essere stato molto esplicito, confido in voi. Saluti.

Io cambierei strategia. In pratica, per fare un countdown che non riparti sempre dal massimo, ti converrebbe avere un valore assoluto su cui calcoare un valore relativo per ogni refresh. Puoi fare in questo modo:
La prima volta che vuoi lanciare il timer, scrivi nel database l'ora attuale (ore-minuti-secondi) ed il numero di secondi che il timer deve contare (fino ad arrivare a 0 - i secondi iniziali insomma). Quindi il timer parte con i secondi iniziali. Ad ogni refresh della pagina, non devi fare altro che leggere l'orario attuale dal sistema, confrontarla con quella inserita nel database, e ricavare quandi secondi sono passati. Quindi sottrai questo valore ai secondi iniziali (di cui avevi memorizzato il valore nel database) e fai ripartire il contatore con questo valore. Ovviamente se i secondi passati sono maggiori del valore iniziale del contatore, il tempo è scaduto

Che ne pensi?

andbin · 19-10-2006, 09:35

Quote:

Originariamente inviato da Sethrian

Ciao ragazzi,
sapreste dirmi come posso creare un countdown in javascript?

Leggi <questo> thread. C'è un mio esempio completo di countdown.

-fidel- · 19-10-2006, 10:36

Ecco, andbin usa proprio la strategia descritta in precedenza, e come puoi vedere funziona. Molto bene

Ti basterà modificare un minimo il codice, per poter interagire con un database, ed è fatta (ma il 99% del lavoro è fatto dal codice postato da andbin sull'altro thread).

Sethrian · 19-10-2006, 15:23

Grazie a tutti, molto gentili.
Allora io ho risolto facendo come ha detto -fidel-.
In pratica ho creato 3 tabelle nel database ore-minuti-secondi (questi sono i dati salvati dall'ora attuale, cioè quando parte il personaggio) in più c'è la tabella con i secondi totali.
Bene al primo derirect mi prende i secondi totali grazie ad un controllo
else if($secondi > 0 && $_GET['avviatimer']==23){
?>
<script>
var seconds = <?PHP print $secondi;?>;
altrimenti mi fà questo calcolo

Codice:

else if($secondi > 0 && $_GET['avviatimer']!=23){
$oraattuale = date('H');
$minutiattuali = date('i');
$secondiattuali = date('s');

$minutidaoreinizio = $orainizio * 60;
$minutitotali = $minutidaoreinizio + $minutinizio;
$secondidaminutinizio = $minutitotali * 60;
$sectotalinizio = $secondidaminutinizio + $secondinizio;

$minutidaoreattuali = $oraattuale * 60;
$minutitotaliattuali = $minutidaoreattuali + $minutiattuali;
$secondidaminutiattuali = $minutitotaliattuali * 60;
$secondiattuali = $secondidaminutiattuali + $secondiattuali;
$risultato = $secondiattuali - $sectotalinizio;
$finale = $secondi - $risultato;
?>
<script>
    var seconds = <?PHP print $finale;?>;

     function $(id) {
      return document.getElementById(id);
    }


    function writecounter(hh, mm, ss) {
        $('ore').value = (hh < 10)? "0"+hh : hh;
        $('min').value = (mm < 10)? "0"+mm : mm;
        $('sec').value = (ss < 10)? "0"+ss : ss;
    }


    function startcount() {

        hh = Math.floor(seconds / 3600);
        mm = Math.floor((seconds - (hh*3600)) / 60);
        ss = seconds - (hh*3600) - (mm*60);
        writecounter(hh, mm, ss);
        seconds--;
        if (seconds != -1) {
        setTimeout('startcount()', 1000)
        }
        else {
        // fai qualcosa
        alert("boh");
        }

    }


    var hh = Math.floor(seconds / 3600);
    var mm = Math.floor((seconds - (hh*3600)) / 60);
    var ss = seconds - (hh*3600) - (mm*60);
</script>

<body onload="startcount()">


    <form>
    <input type="text" size="2" id="ore" readonly="readonly" /> :
    <input type="text" size="2" id="min" readonly="readonly" /> :
    <input type="text" size="2" id="sec" readonly="readonly" />
    </form>

    <script>
    writecounter(hh, mm, ss);
    </script>

</body>
<?PHP
}

L'unico problema che il timer scende anche sotto lo 0

andbin ho letto il tuo post, ma di js non ne capisco molto.. Preferire che mi aiuti a modificare questo dato che è quasi pronto..

Allora dobbiamo riuscire a non far andare il timer sotto lo 0 e quando ha finito dovrei fare un include di un file che inserisce i dati nel database..
Io ho provato in questo modo

Codice:

        else {
        // fai qualcosa
        <?PHP include("file.php");?>;
        }

Ma non funge più tutto il codice..

Mi affido a voi che ne sapete di più di me in questo campo. Grazie per le risposte grandiosi. Saluti.

andbin · 19-10-2006, 16:00

Quote:

Originariamente inviato da Sethrian

Grazie a tutti, molto gentili.
L'unico problema che il timer scende anche sotto lo 0

andbin ho letto il tuo post, ma di js non ne capisco molto.. Preferire che mi aiuti a modificare questo dato che è quasi pronto..

Beh, comunque anche tu stai usando Javascript!!

Il tuo script non è molto chiaro, come sintassi più che altro:

function $(id)

$('ore').value = (hh < 10)? "0"+hh : hh;

Non mi sembrano valide.

Comunque ho capito cosa vuoi fare: dal PHP generi un valore in secondi che poi tramite Javascript devi scalare fino a 0.

Ecco cosa farei io:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Countdown</title>
<script type="text/javascript">
<!--
var seconds = 4523;

function pad (n)
{
    return n < 10 ? "0"+n : n;
}

function countdown_update ()
{
    document.countdown.ore.value = pad (Math.floor (seconds / 3600) % 24);
    document.countdown.min.value = pad (Math.floor (seconds / 60) % 60);
    document.countdown.sec.value = pad (seconds % 60);

    seconds--;

    if (seconds >= 0)
        window.setTimeout (countdown_update, 1000);
}
//-->
</script>
</head>
<body onload="countdown_update()">

<form name="countdown">
<input type="text" size="2" name="ore" readonly="readonly">
<input type="text" size="2" name="min" readonly="readonly">
<input type="text" size="2" name="sec" readonly="readonly">
</form>

</body>
</html>

Al posto di quel 4523 ci devi solo mettere il risultato ottenuto con PHP.

Più semplice di così ....

Sethrian · 19-10-2006, 16:08

Ciao e grazie ancora per la risposta.
Sì utilizzo js, xò è uno script trovato in rete

Ho provato come hai detto e funziona.. Sempre facendo i controlli.. Solo che quando arriva a 0 dovrebbe inserire dei dati nel database invece lasciandolo com'è il conutdown mi scende sotto lo 0.. Come posso fare?

Poi magari vorrei mettere anche dei numeri gif..

Grazie ancora, Saluti.

andbin · 19-10-2006, 16:31

Quote:

Originariamente inviato da Sethrian

Solo che quando arriva a 0 dovrebbe inserire dei dati nel database invece lasciandolo com'è il conutdown mi scende sotto lo 0.. Come posso fare?

Ovviamente in Javascript non puoi fare nulla, ormai la pagina è arrivata al browser e per eseguire qualcosa lato server devi per forza caricare un'altra pagina. Dovresti fare una cosa del tipo:

Codice:

if (seconds >= 0)
    window.setTimeout (countdown_update, 1000);
else
    location.href = "script.php";

dove script.php è lo script in cui farai quello che vuoi con il db quando i secondi sono arrivati a 0.

Quote:

Originariamente inviato da Sethrian

Poi magari vorrei mettere anche dei numeri gif..

Anche questo è fattibile ... con un pochino di sbattimento in più con Javascript ma è possibile.

Sethrian · 19-10-2006, 16:55

Quote:

Originariamente inviato da andbin

..Anche questo è fattibile ... con un pochino di sbattimento in più con Javascript ma è possibile.

Ciao,
Allora facendo come hai detto funziona o almeno credo (devo ancora provare). Per quanto riguarda i numeri poi? ti ho detto che nn ci sò fare con js..

Grazie ancora, Saluti.

andbin · 19-10-2006, 17:15

Quote:

Originariamente inviato da Sethrian

Per quanto riguarda i numeri poi? ti ho detto che nn ci sò fare con js..

Non è difficile. Per iniziare devi calcolare i valori dei digit delle ore/min/sec.

Poi nella pagina avrai delle immagini:
<img src="digit0.gif" id="ora1" width="..." height="...">
<img src="digit0.gif" id="ora2" width="..." height="...">
....

Poi da Javascript è facile sostituire una immagine con un'altra. Si ottiene l'oggetto immagine dall'id e si imposta la proprietà 'src'. Ecco un esempio.

obj = document.getElementById("ora1");
obj.src = "digit2.gif";

Poi ci sarebbe la questione del preloading delle immagini ma questo non è fondamentale.

Sethrian · 19-10-2006, 18:21

Ciao e grazie ancora..
Non riesco a venirne a capo

Ho detto che di js ne capisco meno di 0.. Potresti dirmelo "terra terra"?

Grazie, Saluti.

andbin · 19-10-2006, 21:46

Quote:

Originariamente inviato da Sethrian

Ciao e grazie ancora..
Non riesco a venirne a capo

Ho detto che di js ne capisco meno di 0.. Potresti dirmelo "terra terra"?

Ok, allora noi abbiamo i 3 valori ora/minuti/secondi da visualizzare. Ognuno ha 2 digit, quindi avrai 6 tag <img> nel documento.

Vediamo per l'ora (gli altri li gestisci poi allo stesso modo):

Codice:

<img src="digit0.gif" id="ora1" width="..." height="...">
<img src="digit0.gif" id="ora2" width="..." height="...">

Ovviamente devi avere creato 10 immaginette dei singoli digit, chiamiamole digit0.gif, digit1.gif, ecc....

Nel codice Javascript, dove calcoli l'ora, dovrai fare una cosa del tipo:

Codice:

ore = Math.floor (seconds / 3600) % 24;
ore_dig1 = ore / 10;
ore_dig2 = ore % 10;

document.getElementById("ora1").src = "digit" + ore_dig1 + ".gif";
document.getElementById("ora2").src = "digit" + ore_dig2 + ".gif";

Idem per minuti e secondi.

Sethrian · 19-10-2006, 22:00

Ok grazie, proverò appena risolvo un altro problema.

Grazie a tutti, Saluti.

18-10-2006, 22:43	#1
Sethrian Member Iscritto dal: Oct 2006 Messaggi: 31	[java script] creare countdown Ciao ragazzi, sapreste dirmi come posso creare un countdown in javascript? Io ho i dati nel database giorni-ore-minuti-sercondi come posso fare? Ho provato alcuni script già pronti, ma non riesco a sistemarli per le mie esigenze. Aspetto fiducioso una vostra risposta, Saluti. __________________ Nocturnal poetry, Dressed in the whitest silver, you'd smile at me Every night I wait for my sweet...

18-10-2006, 22:49	#2
Sethrian Member Iscritto dal: Oct 2006 Messaggi: 31	Allora ho trovato questo script in giro per la rete Codice: <script> var seconds = "PRENDO I SECONDI DAL DB"; function $(id) { return document.getElementById(id); } function addOnload(f) { var prev = window.onload; window.onload = function() { if (prev) prev(); f(); } } function writecounter(hh, mm, ss) { $('ore').value = (hh < 10)? "0"+hh : hh; $('min').value = (mm < 10)? "0"+mm : mm; $('sec').value = (ss < 10)? "0"+ss : ss; } function startcount() { hh = Math.floor(seconds / 3600); mm = Math.floor((seconds - (hh3600)) / 60); ss = seconds - (hh3600) - (mm60); writecounter(hh, mm, ss); seconds--; if (seconds != -1) { setTimeout('startcount()', 1000) } else { // fai qualcosa alert("ho finito!"); } } var hh = Math.floor(seconds / 3600); var mm = Math.floor((seconds - (hh3600)) / 60); var ss = seconds - (hh3600) - (mm60); addOnload(startcount); </script> <body> <form> <input type="text" size="2" id="ore" readonly="readonly" /> : <input type="text" size="2" id="min" readonly="readonly" /> : <input type="text" size="2" id="sec" readonly="readonly" /> </form> <script> writecounter(hh, mm, ss); </script> </body> Io in questa materia mi ritengo ingnorante per cui mi affido a voi. In pratica lo devo inserire in un gioco tipo ogame, uno script mi inserisce i secondi nel db in modo randomico, e poi il javascript prende i secondi e mi fà il countdown, tutto funziona. Però siccome lo script parte quando viene aggiornata la pagina, ogni volta che un utente và nella pagina dello script lui riparte dai secondi che ci sono nel database. Ora dovrei inserire un controllo che non permetta ciò. Ho provato con un $_GET['linked=2'] solo che aggiornando la pagina sparisce tutto.. Come potrei fare? In pratica funziona in questo modo. io inserisco delle coordinate e clicco su "Invia" e và sulla pagina che inserisce i dati nel database poi un refresh tramite java riporta l'utente alla pagina iniziale e lo script parte solo che senza un controllo ogni volta che aggiorna la pagina il timer riparte dai secondi iniziali.. Spero di essere stato molto esplicito, confido in voi. Saluti. __________________ Nocturnal poetry, Dressed in the whitest silver, you'd smile at me Every night I wait for my sweet...

19-10-2006, 10:36	#5
-fidel- Senior Member Iscritto dal: Jan 2006 Messaggi: 2722	Ecco, andbin usa proprio la strategia descritta in precedenza, e come puoi vedere funziona. Molto bene Ti basterà modificare un minimo il codice, per poter interagire con un database, ed è fatta (ma il 99% del lavoro è fatto dal codice postato da andbin sull'altro thread). __________________ - Spesso gli errori sono solo i passi intermedi che portano al fallimento totale. - A volte penso che la prova piu' sicura che esiste da qualche parte una forma di vita intelligente e' il fatto che non ha mai tentato di mettersi in contatto con noi. -- Bill Watterson

19-10-2006, 16:08	#8
Sethrian Member Iscritto dal: Oct 2006 Messaggi: 31	Ciao e grazie ancora per la risposta. Sì utilizzo js, xò è uno script trovato in rete Ho provato come hai detto e funziona.. Sempre facendo i controlli.. Solo che quando arriva a 0 dovrebbe inserire dei dati nel database invece lasciandolo com'è il conutdown mi scende sotto lo 0.. Come posso fare? Poi magari vorrei mettere anche dei numeri gif.. Grazie ancora, Saluti. __________________ Nocturnal poetry, Dressed in the whitest silver, you'd smile at me Every night I wait for my sweet... Ultima modifica di Sethrian : 19-10-2006 alle 16:21.

19-10-2006, 18:21	#12
Sethrian Member Iscritto dal: Oct 2006 Messaggi: 31	Ciao e grazie ancora.. Non riesco a venirne a capo Ho detto che di js ne capisco meno di 0.. Potresti dirmelo "terra terra"? Grazie, Saluti. __________________ Nocturnal poetry, Dressed in the whitest silver, you'd smile at me Every night I wait for my sweet...

19-10-2006, 22:00	#14
Sethrian Member Iscritto dal: Oct 2006 Messaggi: 31	Ok grazie, proverò appena risolvo un altro problema. Grazie a tutti, Saluti. __________________ Nocturnal poetry, Dressed in the whitest silver, you'd smile at me Every night I wait for my sweet...

Strumenti
Mostra una versione stampabile Invia questa pagina per email