• Super User

    countdown ripetuto piu' volte nella stessa pagina

    Salve a tutti

    dovrei inserire un countdown in una pagina dove ho varie offerte.
    La scadenza sarà sempre la stessa

    Sto provando questo codice, ma me lo mostra solo nella prima offerta, come potrei fare per mostrarlo in tutte?

    
    <script>
    // Set the date we're counting down to
    var countDownDate = new Date("May 24, 2019 20:00:00").getTime();
    
    // Update the count down every 1 second
    var x = setInterval(function() {
    
      // Get todays date and time
      var now = new Date().getTime();
    
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
    
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
      // Display the result in the element with id="demo"
      document.getElementById("demo").innerHTML = days + " Giorni " + hours + " ore "
      + minutes + " minuti " + seconds + " secondi ";
    
      // If the count down is finished, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "Promo Scaduta!";
      }
    }, 1000);
    </script>
    
    

    Grazie


  • User Attivo

    Ciao,

    devi utilizzare una classe anzichè un id, per richiamarla in javascript è necessaria la funzione getElementByClassName.

    [HTML]
    <div class="promo"></div>
    <div class="promo"></div>
    <div class="promo"></div>
    <div class="promo"></div>

    <script>
    // Set the date we're counting down to

    var countDownDate = new Date("May 30, 2019 11:26:00").getTime();

    // Update the count down every 1 second

    var x = setInterval(function() {

    // Get todays date and time
    
    var now = new Date().getTime();
    
    // Find the distance between now and the count down date
    
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Display the result in the element with class="promo"    
    
    var promo = document.getElementsByClassName("promo");
    
    for(var i = 0; i < promo.length; i++)
    {
        promo*.innerHTML = days + " Giorni " + hours + " ore " + 
                                         minutes + " minuti " + seconds + " secondi ";
    }
    
    // If the count down is finished, write some text 
    
    if (distance < 0) {
        clearInterval(x);
        var promo = document.getElementsByClassName("promo");
    
        for(var i = 0; i < promo.length; i++)
        {
            promo*.innerHTML = "Promo Scaduta!";
        }
    }
    

    }, 1000);

    </script>
    [/HTML]


  • Super User

    Ciao
    La soluzione è perfetta, grazie

    Solo una cosa, visto che devo metterlo in tante pagine, volendo creare un campo "data_scadenza" nel database, come potrei modificare questa stringa con php?

    
    var countDownDate = new Date("May 30, 2019 11:26:00").getTime();
    
    

    In questo caso creerei qualcosa tipo
    [code]
    var countDownDate = new Date("<?=$data_scadenza?>").getTime();
    [/code
    in modo da aggiornare solo il campo del database e visualizzarlo in automatico in tutte le offerte

    Vorrei evitare di creare il campo mese_scadenza, giorno_scadenza, anno_scadenza, orario_scadenza

    Grazie


  • User Attivo

    Utilizza sempre un solo campo per le date nel DB, all'occorrenza ti formatti la data come ti pare.

    In PHP puoi usare strftime() per formattare una data, prende come parametri il formato e lo Unix timestamp, che sarebbe il numero di secondi trascorsi a partire dal 1 gen 1970. Questo valore te lo puoi ricavare tramite la funzione strtotime().

    Dunque per ottenere la data formattata devi usare prima strtotime per ottenere il numero di secondi da dare come parametro a strftime. Non dimenticarti di settare il tempo locale in italiano (utilizza setlocale()), altrimenti il mese ti verrrà stampato in english.

    Non ti posto la pappa bella e pronta, però ti ho dato indicazioni su cosa devi fare, non è affatto complicato 😉

    Ti lascio i link alla documentazione delle 2 funzioni, se e quando mi attiveranno l'account premium, finalmente potrò postare i link senza doverli modificare 😄

    php.net/manual/en/function.strftime.php

    php.net/manual/en/function.strtotime.php


  • Super User

    Ciao
    ho risolto creando un campo di testo dove cambio direttamente il valore "May 30, 2019 11:26:00" a mio piacere e poi lo richiamo totalmente
    Mi trovo bene

    Grazie


  • User Attivo

    Ciao,

    il problema di salvarlo in quel formato è che non puoi ordinarlo e non puoi utilizzarlo nelle espressioni con WHERE (Es. WHERE data >= AND data <=).

    Sarebbe opportuno tu lo salvassi come DATETIME e non VARCHAR o TEXT, a meno che non ti interessano eventuali elaborazioni.