View Full Version : [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
<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.
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?
Ciao ragazzi,
sapreste dirmi come posso creare un countdown in javascript?Leggi <questo> (http://www.hwupgrade.it/forum/showthread.php?t=1207958) thread. C'è un mio esempio completo di countdown. ;)
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
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 :O
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
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. :)
Grazie a tutti, molto gentili.
L'unico problema che il timer scende anche sotto lo 0 :O
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:
<!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 :stordita:
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. :)
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:
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.
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
..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. :)
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 :muro: Ho detto che di js ne capisco meno di 0.. Potresti dirmelo "terra terra"? :rolleyes:
Grazie, Saluti. :)
Ciao e grazie ancora..
Non riesco a venirne a capo :muro: Ho detto che di js ne capisco meno di 0.. Potresti dirmelo "terra terra"? :rolleyes: 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):
<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:
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. :)
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.