countdown in allegato

[luckyone]

Vorrei inserire nel mio sito un countdown come quello in allegato, ma in JavaScript

[andbin]

Originariamente inviato da luckyone

Vorrei inserire nel mio sito un countdown come quello in allegato, ma in JavaScript

Prova 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]

Bello, ma mi interessa il formato dei numeri.

[andbin]

Originariamente inviato da luckyone

Bello, ma mi interessa il formato dei numeri.

Intendi l'aspetto visuale dei numeri?? Cioè farlo in modo grafico?

[luckyone]

Originariamente inviato da andbin

Intendi l'aspetto visuale dei numeri?? Cioè farlo in modo grafico?

si

[andbin]

Originariamente inviato da luckyone

si

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.

[luckyone]

Originariamente inviato da andbin

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.

[andbin]

Originariamente inviato da luckyone

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]

si puo fare una cosa del genere ma al contrario sommando i giorni passati da un determinato giorno