Countdown / timer javascript

Fxxxx

Utente Attivo
17 Set 2011
63
0
0
scusate raga
ho già visto alcuni timer ma non essendo un programmatore javascript non riesco ad adattarlo alle mie esigenze....
avrei bisogno di un timer che conta diciamo da 10 fino a zero (e comincia solo quando si clicca su un div, immagino quindi che bisogna creare una funzione javascript da mettere nell'head e poi richiamarla attraverso onClick="funzione();")
Alla fine del conto bisogna che javascript mi trasformi la propietà di un div da display:none a display:block
Come posso fare ?
Mi potreste fare un piccolo script ?
Tutto in secondi, senza ore o minuti... deve semplicemente partire da 10 e arrivare a 0 partendo dal click su un div della pagina... e quando arriva a 0 deve fare un'azione (rendere visibile il div)
ciao e grazie
 

alessandro1997

Utente Attivo
6 Ott 2009
5.303
1
0
22
Roma
alessandro1997.netsons.org
Esempio non testato:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Countdown</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <script type="text/javascript">
            seconds = 10;

            function updateTimer(divId)
            {
                elem = document.getElementById(divId);
                document.getElementById('seconds').innerHTML = --seconds;

                if (seconds == 0) {
                    elem.style.display = 'block';
                } else {
                    setTimeout("updateTimer('" + divId + "')", 1000);
                }
            }
        </script>
    </head>

    <body>
        <input type="button" onclick="javascript:updateTimer('foo');" value="Inizia conto alla rovescia" />

        <h1 id="seconds">10</h1>

        <div id="foo" style="display: none;">
            <h1>Conto alla rovescia terminato!</h1>
        </div>
    </body>
</html>
 

Fxxxx

Utente Attivo
17 Set 2011
63
0
0
Perfetto...
Però io non riesco a riadattarlo...
Ora io voglio che andando sopra a un div cominci il timer... Cosa faccio metto:
HTML:
<div id="nomediv" onMouseOver="javascript:updateTimer('foo');">
Poi voglio che venga mostrato un div con id button al posto del div che contiene: Conto alla rovescia terminato!
Come faccio devo mettere javascript:updateTimer('button'); al posto di javascript:updateTimer('foo');?
Ciao e grazie
 

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

Salve a tutti,

M'introduco nella discussione. Vorrei sapere, è possibile mettere un input da selezionare quanti secondi si vogliono da cui partire il timer ???? E inoltre come posso aggiungere 00:00:10 ???? Grazie spero di esssermi spiegato a sufficienza e di ricevere soluzioni al riguardo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Puoi provare cosi:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Countdown</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <script type="text/javascript">
            function updateTimer(divId,seconds)
            {           
                elem = document.getElementById(divId);
                document.getElementById('seconds').innerHTML = "00:00:" + seconds;

                if (seconds == 0) {
                    elem.style.display = 'block';
                } else {
                    var count = seconds - 1;
                    setTimeout("updateTimer('" + divId + "'," + count + ")", 1000);
                }
            }
            // setta conteggio iniziale 
            function setTime(time) {
                document.getElementById('seconds').innerHTML = "00:00:" + parseInt(time);
            }
            // recupero valore select
            function getSelected(select) {
                return select.options[select.selectedIndex].value;
            }
            // recupera l'elemento
            function getId(el) {
                return document.getElementById(el);
            }
        </script>
    </head>

    <body>
        <div>
            <select name="secondi" id="secondi" onchange="setTime(getSelected(this))">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>                
            </select>
            <input type="button" onclick="updateTimer('foo',getSelected(getId('secondi')));" value="Inizia conto alla rovescia" />

            <h1 id="seconds">00:00:10</h1>

            <div id="foo" style="display: none;">
                <h1>Conto alla rovescia terminato!</h1>
            </div>
        </div>
    </body>
</html>
 

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

Ciao Grazie,

Ci provo e ti dico. Magnifico stupendo. Volevo sapere solo na cosa, ci si può mmettere na specie di suoneria alla fine del conto ???? O chiedo la luna ???? Mi autocorreggo va tutto bene, devo aver premuto due volte inizio per sbaglio
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
devo aver premuto due volte inizio per sbaglio
puoi disabilitare il pulsante una volta premuto e riabilitarlo quando il conteggio è finito
dovrai dare un id al pulsante , io ho messo id='avvia' e nalla funzione scrivi cosi
Codice:
function updateTimer(divId,seconds)
            {    
                document.getElementById('avvia').disabled=true;
quando il conteggio è finito lo riabiliti
Codice:
if (seconds == 0) {
                    document.getElementById('avvia').disabled=false;
                    elem.style.display = 'block';
                }
per la musica puoi usare il metodo play() sempre quando il conteggio è finito
prova a fare una ricerca in rete e a guardare questa discussione
http://forum.mrwebmaster.it/javascript/30737-html5-audio-gestito-javascript.html
 

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

Ciao cricric,

Il tuo script del conto alla rovescia è stato grandioso, solo ch enon ho capito dove devo inserire le function per disabilitare il tasto e poi riabilitarlo. Devoi fare un file con estensione .js a parte e poi richiamarlo ??? Oppure tutto in un unico file ????
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
nello stesso script
ho aggiunto anche un controllo sui secondi in modo che se < di 10 anziche scrivere 9 scrive 09
eccolo:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Countdown</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <script type="text/javascript">
            function updateTimer(divId,seconds)
            {    
                document.getElementById('avvia').disabled=true;
                elem = document.getElementById(divId);
                elem.style.display = 'none';
                sec = seconds;
                if(seconds < 10) {
                    sec = "0" + seconds;
                }
                document.getElementById('seconds').innerHTML = "00:00:" + sec;

                if (seconds == 0) {
                    document.getElementById('avvia').disabled=false;
                    elem.style.display = 'block';
                } else {
                    var count = seconds - 1;
                    setTimeout("updateTimer('" + divId + "'," + count + ")", 1000);
                }
            }
            // setta conteggio iniziale 
            function setTime(time) {
                document.getElementById('seconds').innerHTML = "00:00:" + parseInt(time);
            }
            // recupero valore select
            function getSelected(select) {
                return select.options[select.selectedIndex].value;
            }
            // recupera l'elemento
            function getId(el) {
                return document.getElementById(el);
            }
        </script>
    </head>

    <body>
        <div>
            <select name="secondi" id="secondi" onchange="setTime(getSelected(this))">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>                
            </select>
            <input type="button" id="avvia" onclick="updateTimer('foo',getSelected(getId('secondi')));" value="Inizia conto alla rovescia" />

            <h1 id="seconds">00:00:10</h1>

            <div id="foo" style="display: none;">
                <h1>Conto alla rovescia terminato!</h1>
            </div>
        </div>
    </body>
</html>
ho appena aggiunto questo:
elem.style.display = 'none';
Serve a nascondere il messaggio una volta riavviato il countdown
 
Ultima modifica:

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

Ti ringrazio tantissimo,

Mi sia dire per caso in esadecimale il colore giallo paglierino ???? Non riesco a trovarlo.

P.S.: Lo script funziona alla grande complimenti....
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ti avevo messo il link. Basta che ci premi sopra
E' un programmino con cui puoi trovare l'esadecimale dei colori
 

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

ti avevo messo il link. Basta che ci premi sopra
E' un programmino con cui puoi trovare l'esadecimale dei colori
Si ti avevo scritto in ritardo dopo che ci sono andato ehehehehe. Scusa. Spero di trovarlo sto giallo canarino. Mi sta facendo impazzire. Hai presente l'interfaccia grafica del frizbox ???? Mi piaceva lo sfondo.

Ti mando un allegato tanto per vedere di cosa parlo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Prendi il contagocce di color cop, lo metti sullo sfondo e ti restituisce questo
#FFFFDE
 

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

Ciao,

C'ho provato, ma perkè non mi cambia lo sfondo e mi rimane sempre lo stesso ???? Ti posto quello che ho fatto così forse quanttro occhi vedono meglio di due:


coloredisfondo.css

PHP:
body {

    backcolor: #FFFFDE;  //qua mi da una lampadina a fianco della riga
}
e questo è il richiamo nella pagina chiamata paginaris.php

PHP:
<link rel='stylesheet' href='coloredisfondo.css'/>
Però mi rimane sempre lo stesso sfondo non capisco dove sbaglio.....
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la sintassi che usi è sbagliata
PHP:
body {
    background-color: #FFFFDE; 
}
Se hai altre domande che non c'entrano con questa discussione ( Countdown / timer javascript) aprine un'altra
 

paperinik4

Utente Attivo
29 Mag 2011
1.812
0
36
Roma
www.ricetteagogo.it
Ciao

Ciao,

Trasferisco a discussione in una nuova discussione. La nuova discussione sui colori la trovi qua:

http://forum.mrwebmaster.it/php/31254-problemi-colori.html#post117915

Ma se l'ultima sintassi che mi hai dato è corretta si può anche chiudere. Però devo vedere se funziona e ti dico. Ho provato ma mi da sempre lo stesso colore di prima come mai ??? Comunque la nuova discussione la trovi sul link che ti ho inviato.
 
Ultima modifica: