2

Precisava de uma ajuda nesse sistema de contagem regressiva de como poderia dividir o |DIA|HORA|MINUTO|SEGUNDOS| em cada div

Exemplo:

Div dia exibiria o dia

Div hora exibiria a hora

Div minuto exibiria a minuto

Div segundos exibiria a segundos

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();

3 Respostas 3

1

Mudei somente o HTML e removi um trecho no Javascript que checava a existência do elemento com id='pageinval7' para escrever os valores no documento:

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>


Uma forma mais simples de manipular datas (e isto inclui criar um contador) seria utilizando o MomentJS, um exemplo:

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>

3
  • 1
    Resolvido, Thanks, boa noite!
    – Josimara
    16/10/2015 às 5:15
  • 1
    @Josimara coloquei uma solução que na minha opinião parece melhor. 16/10/2015 às 5:42
  • 1
    Gostei muito do Moment.js, thankss!!!
    – Josimara
    17/10/2015 às 3:37
1

O.o, acredito que esse código poderia estar bem mais organizado e reduzido. Atendendo ao problema, para isto, basta que cries novas divs, escrevendo diretamente no html, ou então vinculando algumas ao corpo da página usando o javascript.

Aqui por exemplo, declaras que o conteúdo dessa div será igual ao valor contido na variável on_event:

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

Da mesma maneira, poderias referenciar diferentes divs para cada valor:

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

Para criar novos elementos, usa-se:

document.createElement('tag');

Ou, vinculando novos elementos:

body.appendChild('tag');

Algumas Referências:

createElement - W3C

appendChild - W3C

getElementById() - W3C

0

Olá tenteu usar e fica em branco, dá uma conferida: 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .