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.302
1
0
24
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.811
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.811
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.811
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.811
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.811
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.811
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.811
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:
Discussioni simili
Autore Titolo Forum Risposte Data
J Make a JavaScript Countdown Timer in OOP Javascript 0
J JavaScript Countdown Timer solution in OOP Javascript 0
J Countdown Timer 2 Javascript 0
L countdown multiplo javascript Javascript 1
M Come fare un countdown in HTML? HTML e CSS 4
L Creare un countdown con giorno specifico della settimana PHP 3
T countdown da sistemare con i CSS... HTML e CSS 4
C Countdown bloccato? Javascript? Javascript 0
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
Alex1990000 [PHP] countdown 6 ore data PHP 9
Michaelweb93 [PHP] Creazione countdown a 72 ore PHP 1
G Countdown in secondi JS su pagina PHP Javascript 1
N Creazione countdown PHP 4
A Countdown js con variabile in php Javascript 16
A countdown modificabile con un click Javascript 1
O Countdown jQuery jQuery 0
O Countdown jQuery Javascript 1
P countdown jquery jQuery 2
blips Countdown e Redirect Javascript 3
T Javascript e countdown multipli Javascript 1
T Countdown e timestamp PHP 0
S countdown in php e script per aprire 2 siti contemporanemante PHP 1
P problema con il countdown per la fine dell'anno e per natale Javascript 13
N Countdown con effetto sonoro Snippet Javascript 0
S countdown PHP 1
maxnegri Problema countdown Javascript 3
S Stampare un messaggio alla fine del countdown in Javascript Javascript 0
S Fare un Countdown con flash Flash 0
L Countdown con script Javascript 4
A Limite minimo con countdown textarea Javascript 0
maxnegri Stampare un messaggio alla fine di un countdown in javascript Javascript 0
M Countdown in asp Classic ASP 0
E Domanda countdown PHP PHP 3
T Countdown fra 2 date in ASP Classic ASP 12
M Differenza tra date e countdown PHP 5
J Top 10 Beautiful Christmas Countdown Timers Javascript 0
G Countdown per l'apertura di un sito Javascript 1
M Countdown script Javascript 1
M countdown Flash 0
M Countdown Server Side Classic ASP 0
C Conto alla rovescia - Countdown (al secondo) Javascript 1
G Countdown particolare Javascript 8
M Piccola intro con countdown!!! Presenta il tuo Sito 1
E requery e timer Database 1
otto9due Creare immagine dinamica timer (come esempio allegato) jQuery 4
A Timer countdownd di 1 ora Javascript 0
S Timer mit app inventor Sviluppo app per Android 1
Marco_88 Come fermare un timer (setTimeout) jQuery 6
Z timer al contrario Javascript 1
N Come inserire timer nei giochi del mio sito HTML e CSS 1

Discussioni simili