Countdown, divide time by div

Question

Countdown, divide time by div

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Example:

Div day would show the day

Div time would display the time

Div minute would show by 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();

javascript html css

asked by anonymous 16.10.2015 / 06:05

2 answers

1

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

Here, for example, you declare that the contents of this div will 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, linking new elements:

body.appendChild('tag');

Some References:

createElement - W3C

appendChild - W3C

getElementById () - W3C

16.10.2015 / 06:47

Windows Form within Windows Form How can I make an MVC lambda filter

score 1 · Accepted Answer

I just changed the HTML and removed a snippet of Javascript that checked for 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 to use MomentJS , a 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>