Countdown / timer javascript

Fxxxx · 10 Nov 2011

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 · 10 Nov 2011

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 · 10 Nov 2011

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

alessandro1997 · 10 Nov 2011

Sì, esatto.

Fxxxx · 10 Nov 2011

Grazie mille ho risolto tutto !

paperinik4 · 2 Set 2012

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 · 2 Set 2012

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 · 2 Set 2012

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

criric · 2 Set 2012

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 · 3 Set 2012

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 · 3 Set 2012

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

paperinik4 · 3 Set 2012

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....

criric · 3 Set 2012

Mi sia dire per caso in esadecimale il colore giallo paglierino ????

no, pero io uso color cop , te lo consiglio

paperinik4 · 3 Set 2012

Ciao

Perdonami,

Cos'è color cop ???

criric · 3 Set 2012

ti avevo messo il link. Basta che ci premi sopra
E' un programmino con cui puoi trovare l'esadecimale dei colori

paperinik4 · 3 Set 2012

Ciao

criric ha scritto:
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 · 3 Set 2012

Prendi il contagocce di color cop, lo metti sullo sfondo e ti restituisce questo
#FFFFDE

paperinik4 · 3 Set 2012

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 · 3 Set 2012

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 · 3 Set 2012

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.

Countdown / timer javascript

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Discussioni simili