Countdown, split time by div

Question

I needed help with this countdown system on how I could divide |DIA|HORA|MINUTO|SEGUNDOS| into each div

Example:

Div day would display the day

Div hour would display the hour

Div minute would display the minute

Div seconds would display seconds

document.write("<div id='pageinval7' style='text-align:center; margin:0;overflow:visible;border:0px; padding: 10px; '></div>");

function countdown_load65() {
var the_event = "";
var on_event = "Atualize a página!";
var yr = 2015;
var mo = 10;
var da = 27;
var hr = 17;
var min = 00;
var sec = 0;
var month = '';
var month = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var bottom_event = "";
var now_d = new Date();
var now_year = now_d.getYear();
if (now_year < 1000) now_year += 1900;
var now_month = now_d.getMonth();
var now_day = now_d.getDate();
var now_hour = now_d.getHours();
var now_min = now_d.getMinutes();
var now_sec = now_d.getSeconds();
var now_val = month[now_month] + " " + now_day + ", " + now_year + " " + now_hour + ":" + now_min + ":" + now_sec;
event_val = month[mo - 1] + " " + da + ", " + yr + " " + hr + ":" + min + ":" + sec;
difference = Date.parse(event_val) - Date.parse(now_val);
differenceday = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
differencehour = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
differencemin = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
differencesec = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
if (document.getElementById('pageinval7')) {
    if (differenceday <= 0 && differencehour <= 0 && differencemin <= 0 && differencesec <= 1 && now_day == da) {
        document.getElementById('pageinval7').innerHTML = on_event;
    } else if (differenceday <= -1) {
        document.getElementById('pageinval7').innerHTML = "Event : " + on_event + " : passed";
    } else {
        document.getElementById('pageinval7').innerHTML = the_event + "Novidades estão por vir em " + differenceday + " dias, " + differencehour + " horas, " + differencemin + " minutos e " + differencesec + " segundos! " + bottom_event;
    }
}
setTimeout("countdown_load65()", 1000);
}
countdown_load65();

Answer 1

O.o, I believe that this code could be much more organized and reduced. Given the problem, all you need to do is create new Divs, writing directly on html, or by linking some to the body of the page using the javascript.

Here for example, you declare that the contents of this div shall be equal to the value contained in the variable on_event:

document.getElementById('pageinval7').innerHTML = on_event;

In the same way, you could reference different Divs for each value:

document.getElementById('nova_div').innerHTML = outra_variavel;

To create new elements, use:

document.createElement('tag');

Or by linking new elements:

body.appendChild('tag');

Some References:

createelement - W3C

appendchild - W3C

getElementById() - W3C

Answer 2

I changed only the HTML and removed a snippet in Javascript that checked the existence of the element with id='pageinval7' to write the values in the document:

function countdown_load65() {
  var the_event = "";
  var on_event = "Atualize a página!";
  var yr = 2015;
  var mo = 10;
  var da = 27;
  var hr = 17;
  var min = 00;
  var sec = 0;
  var month = '';
  var month = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
  var bottom_event = "";
  var now_d = new Date();
  var now_year = now_d.getYear();
  if (now_year < 1000) now_year += 1900;
  var now_month = now_d.getMonth();
  var now_day = now_d.getDate();
  var now_hour = now_d.getHours();
  var now_min = now_d.getMinutes();
  var now_sec = now_d.getSeconds();
  var now_val = month[now_month] + " " + now_day + ", " + now_year + " " + now_hour + ":" + now_min + ":" + now_sec;
  event_val = month[mo - 1] + " " + da + ", " + yr + " " + hr + ":" + min + ":" + sec;
  difference = Date.parse(event_val) - Date.parse(now_val);
  differenceday = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
  differencehour = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
  differencemin = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
  differencesec = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

  if (differenceday <= 0 && differencehour <= 0 && differencemin <= 0 && differencesec <= 1 && now_day == da) {
    document.getElementById('evento').innerHTML = on_event;
  } else if (differenceday <= -1) {
    document.getElementById('evento').innerHTML = "Event : " + on_event + " : passed";
  } else {

    document.getElementById('dia').innerHTML = differenceday;
    document.getElementById('hora').innerHTML = differencehour;
    document.getElementById('minuto').innerHTML = differencemin;
    document.getElementById('segundos').innerHTML = differencesec;

  }
  setTimeout("countdown_load65()", 1000);
}
countdown_load65();

p { display: inline }

Novidades estão por vir em 
<p id='dia'></p> dias, 
<p id='hora'></p> horas, 
<p id='minuto'></p> minutos e 
<p id='segundos'></p> segundos!

<p id='evento'></p>

---

A simpler way to manipulate dates (and this includes creating a counter) would be using the Momentjs, an example:

var evento  = new Date(2035, 10, 27, 17, 00, 00)
  , atual   = new Date().getTime()
  , duracao = moment.duration(evento - atual, 'milliseconds');
document.getElementById('dia').innerHTML = duracao.months();
setInterval(function() {

  duracao = moment.duration(duracao - 1000, 'milliseconds');
  document.getElementById('anos').innerHTML = duracao.years();
  document.getElementById('meses').innerHTML = duracao.months();
  document.getElementById('dia').innerHTML = duracao.days();
  document.getElementById('hora').innerHTML = duracao.hours();
  document.getElementById('minutos').innerHTML = duracao.minutes();
  document.getElementById('segundos').innerHTML = duracao.seconds();

}, 1000);

time p { display: inline }

<script src="https://momentjs.com/downloads/moment.min.js"></script>

<time>
  <p id='anos'></p> anos
  <p id='meses'></p> meses
  <p id='dia'></p> dias
  <p id='hora'></p> horas 
  <p id='minutos'></p> minutos
  <p id='segundos'></p> segundos.
</time>

Answer 3

Hello tried to use and stay blank, give a check: https://www.muscularizando.com.br/testes/contador-regressivo.php

var evento  = new Date(2035, 10, 27, 17, 00, 00)
  , atual   = new Date().getTime()
  , duracao = moment.duration(evento - atual, 'milliseconds');
document.getElementById('dia').innerHTML = duracao.months();
setInterval(function() {

  duracao = moment.duration(duracao - 1000, 'milliseconds');
  document.getElementById('anos').innerHTML = duracao.years();
  document.getElementById('meses').innerHTML = duracao.months();
  document.getElementById('dia').innerHTML = duracao.days();
  document.getElementById('hora').innerHTML = duracao.hours();
  document.getElementById('minutos').innerHTML = duracao.minutes();
  document.getElementById('segundos').innerHTML = duracao.seconds();

}, 1000);

time p { display: inline }

<script src="https://momentjs.com/downloads/moment.min.js"></script>

<time>
  <p id='anos'></p> anos
  <p id='meses'></p> meses
  <p id='dia'></p> dias
  <p id='hora'></p> horas 
  <p id='minutos'></p> minutos
  <p id='segundos'></p> segundos.
</time>