countdown ripetuto piu' volte nella stessa pagina

no.stress

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

flaviors200

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>

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]

no.stress

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

flaviors200

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

no.stress

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

flaviors200

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.