Countdown

**Checkk** · 20-02-2020, 00:01

Salve ragazzi,
Da totalmente inesperto, sto cercando il codice di un conto alla rovescia. Ne ho trovati diversi ed il più valido mi sembra questo:

codice:

var timeoutHandle;function countdown(minutes,stat) {
    var seconds = 60;
    var mins = minutes;
      
    if(getCookie("minutes")&&getCookie("seconds")&&stat)
    {
         var seconds = getCookie("seconds");
         var mins = getCookie("minutes");
    }
      
    function tick() {
         
        var counter = document.getElementById("timer");
        setCookie("minutes",mins,10)
        setCookie("seconds",seconds,10)
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML = 
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        //save the time in cookie
         
         
         
        if( seconds > 0 ) {
            timeoutHandle=setTimeout(tick, 1000);
        } else {
              
            if(mins > 1){
                  
               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst    
               setTimeout(function () { countdown(parseInt(mins)-1,false); }, 1000);
                      
            }
        }
    }
    tick();
}
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
 function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
countdown(2,true);

L'unico motivo per il quale non riesco ad utilizzarlo è che al momento di inserire il codice html, il timer compare a capo. Allego un'immagine per far capire meglio il risultato che desidero. Grazie a chiunque vorrà aiutarmi.

PS. L'html è questo:

codice:

<div id="hms">00:10:10</div>

E vorrei se fosse possibile qualcosa del tipo:

codice:

<div id="hms"><p>Ore rimaste:00:10:10</div>/p>

**KillerWorm** · 20-02-2020, 09:20

Ciao, il fatto che vada a capo dipende dal tipo di elemento HTML che stai utilizzando. Il <div> è un elemento "block-level" per cui di default inizia con una nuova riga e occupa l'intero spazio disponibile. Prova invece ad usare uno <span> che, essendo un elemento "inline", viene inserito nel flusso del testo e occupa lo spazio del suo stesso contenuto.

codice:

Rimangono: <span id="timer"></span>

**Checkk** · 20-02-2020, 09:46

Ti ringrazio tantissimo. 1° problema risolto

Vedo il risultato desiderato attraverso un emulatore simile a codepen.
Non riesco però a farlo funzionare su un sito in wordpress. Ho fatto 3 prove e non va in nessuna.
1° test: edito il file functions.php e inserisco l'html in una pagina di prova.
2° test: con elementor stessa cosa.
3° test: uso soltanto l'editor di wp.
In tutti e 3 i casi, compare soltanto il codice html che rimane "fermo".
Hai altri stupendi suggerimenti?

Grazie!

EDIT: Ho dimenticato il 4° test che ovviamente non è andato. Solo per scrupolo ed averle tentate tutte ho installato un plugin per inserire il codice.

**Checkk** · 20-02-2020, 10:36

Ragazzi ho risolto! Ho preso un altro codice js ed adesso funziona correttamente.

**KillerWorm** · 20-02-2020, 11:22

1° problema risolto

Bene

1° test
...
4° test

In tutti e quattro i casi assicurati che quello script venga eseguito solo dopo che l'elemento id="timer" (o quello che è) sia stato già creato nella pagina e quindi disponibile per la manipolazione via script.

Puoi verificare sulla console del tuo browser (pigia F12 per aprirla) se salta fuori qualche errore di script; dovresti vedere una cosa del tipo: TypeError: counter is null

La funzione getElementById infatti, per essere eseguita correttamente, ha bisogno che l'elemento specificato sia già creato e disponibile sulla pagina.

In poche parole, nel markup HTML dovrai "includere" quello script dopo l'elemento in questione (meglio se alla fine del <body>).

In alternativa puoi includere lo script dove ti pare ma utilizzare l'evento load della finestra per lanciare la funzione countdown() in modo che quello script sia eseguito solo al termine del caricamento di tutta la pagina.

Inserisci quindi lo script dove e come meglio ti pare ma "avvolgi" la chiamata della funzione in questo modo:

codice:

window.addEventListener('load', function(){
   countdown(2, true);
}, false);

Ragazzi ho risolto! Ho preso un altro codice js ed adesso funziona correttamente.

Probabile che questo script abbia appunto un accorgimento del genere per essere eseguito correttamente quando quello specifico elemento risulta disponibile.

Buon proseguimento

Discussione: Countdown

Strumenti discussione

Ricerca discussione

Visualizza

Countdown

Tag per questa discussione

Permessi di invio