PDA

View Full Version : countdown in allegato

luckyone
25-05-2006, 08:21
Vorrei inserire nel mio sito un countdown come quello in allegato, ma in JavaScript
andbin
25-05-2006, 09:15
Vorrei inserire nel mio sito un countdown come quello in allegato, ma in JavaScriptProva questa pagina html:
<!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>Date Countdown</title>
<script type="text/javascript">
<!--
var from_year = 2007;
var from_month = 1;
var from_day = 1;
var from_hour = 0;
var from_minute = 0;
var from_second = 0;

var d1 = new Date (from_year, from_month-1, from_day, from_hour, from_minute, from_second);

var old_second = -1;

function countdown_format (d, h, m, s)
{
return "giorni: " + d + " / " +
"ore: " + h + " / " +
"minuti: " + m + " / " +
"secondi: " + s;
}

function countdown_update ()
{
var d2 = new Date ();

var new_second = d2.getSeconds ();

if (new_second != old_second)
{
var diff = d1 - d2;
var str;

if (diff > 0)
{
var seconds = Math.floor (diff / 1000) % 60;
var minutes = Math.floor (diff / 60000) % 60;
var hours = Math.floor (diff / 3600000) % 24;
var days = Math.floor (diff / 86400000);

str = countdown_format (days, hours, minutes, seconds);
}
else
str = "Data superata!";

document.getElementById("countdown").innerHTML = str;

old_second = new_second;
}

window.setTimeout (countdown_update, 100);
}
//-->
</script>
<style type="text/css">
<!--
#info { font: normal 16px sans-serif; color: red; }
#countdown { font: bold 25px sans-serif; color: blue; }
-->
</style>
</head>
<body onload="countdown_update()">

<p>
<span id="info">
Tempo rimanente fino alla data:
<b>
<script type="text/javascript">
<!--
document.write (d1);
//-->
</script>
</b>
</span>

<br>
<br>

<span id="countdown"></span>
</p>

</body>
</html>Modificalo pure come meglio credi. :)
Se c'è qualcosa che non ti è chiaro, chiedi pure, l'ho realizzato io. ;)
luckyone
25-05-2006, 09:26
Bello, ma mi interessa il formato dei numeri.
andbin
25-05-2006, 09:42
Bello, ma mi interessa il formato dei numeri.Intendi l'aspetto visuale dei numeri?? Cioè farlo in modo grafico?
luckyone
25-05-2006, 11:00
Intendi l'aspetto visuale dei numeri?? Cioè farlo in modo grafico?
si
andbin
25-05-2006, 11:42
siBeh, non è difficile (puoi provare a farlo tu). Crei 10 immagini che rappresentano i numeri da 0 a 9, poi nella pagina html metti N tag <img> e in base al valore delle variabili che tengono i secondi, minuti, ecc..., ottieni le singole cifre decimali, es. minuti=24 -> 2 e 4 e poi imposti la proprietà src degli oggetti Image relativi ai tag <img> in modo da cambiare le immagini. Credo che sia più complicato dirlo che a farlo. ;)
luckyone
25-05-2006, 14:28
Beh, non è difficile (puoi provare a farlo tu). Crei 10 immagini che rappresentano i numeri da 0 a 9, poi nella pagina html metti N tag <img> e in base al valore delle variabili che tengono i secondi, minuti, ecc..., ottieni le singole cifre decimali, es. minuti=24 -> 2 e 4 e poi imposti la proprietà src degli oggetti Image relativi ai tag <img> in modo da cambiare le immagini. Credo che sia più complicato dirlo che a farlo. ;)
:( :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry:
andbin
25-05-2006, 15:18
:( :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry:Ok ... ti spiego qualcosa in più.

Supponiamo di avere le 10 immagini delle cifre posizionate in una sottodirectory "img" e chiamate "0.gif", "1.gif", ecc....

Nel codice Javascript, subito all'inizio, metti questo codice:
var imgDigits = new Array ();

for (i = 0; i < 10; i++)
{
imgDigits[i] = new Image ();
imgDigits[i].src = "img/" + i + ".gif";
}Serve per "precaricare" le immagini e ad avere un array di oggetti di tipo Image.

Nella pagina html metti dei tag <img>. Dove e come metterli sta a te, il layout lo scegli tu. Avrai ad esempio:
...
<img id="minutes1" width="...." height="...." src="img/0.gif">
<img id="minutes2" width="...." height="...." src="img/0.gif">
...
<img id="seconds1" width="...." height="...." src="img/0.gif">
<img id="seconds2" width="...." height="...." src="img/0.gif">Nota che per convenienza, ho preimpostato le immagini con la cifra 0 ma tanto verranno poi cambiate al primo update.

Nel codice Javascript (vedi quello che ho già postato) vengono calcolate ad un certo punto le variabili days, hours, ecc... che contengono i valori finali.

Prendiamo i secondi, per esempio. Puoi fare ulteriormente:
var seconds_1 = Math.floor (seconds / 10); /* Il primo digit */
var seconds_2 = seconds % 10; /* Il secondo digit */
Poi a quel punto:
document.getElementById("seconds1").src = imgDigits[seconds_1].src;
document.getElementById("seconds2").src = imgDigits[seconds_2].src;
Nota che il "seconds1" chiesto alla getElementById fa riferimento al 'id' nei tag <img>

A questo punto basta gestire tutti i digit e sei a posto! La struttura generale, minimale è questa. Poi puoi abbellirla, modificarla come vuoi.

Naturalmente se hai altri dubbi, chiedi pure. Comunque prova a mettere giù qualcosa tu. ;)
GiacoXp
23-11-2006, 19:50
si puo fare una cosa del genere ma al contrario sommando i giorni passati da un determinato giorno