Visualizzazione dei risultati da 1 a 5 su 5

Discussione: Countdown

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2020
    Messaggi
    3

    Countdown

    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>
    Immagini allegate Immagini allegate

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    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>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2020
    Messaggi
    3
    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.
    Ultima modifica di Checkk; 20-02-2020 a 10:07

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2020
    Messaggi
    3
    Ragazzi ho risolto! Ho preso un altro codice js ed adesso funziona correttamente.

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    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
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.