Develop Reference

How does one provide or target different data to DOM elements of one kind and does manage / maintain each of an element's rerender / update cycle?

I'm working on a page on my wordpress site where i pull data from the backend. The data has an end_date column that i use to display a countdown timer i.e. from the current date time till the end_date.
This is how i approach it:
This is the html element that will display the timer:
<div class="t1-auction-timer"></div>
This is the javascript that creates the timer:
var countDownDate = new Date("<?=$endDate?>").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
var timer = document.querySelectorAll(".t1-auction-timer");
for (var i = 0; i < timer.length; i++)
{
timer[i].innerHTML = '<ul class="clock-value"><li class="clock-days">' + padNumber(days) + '<small>days</small> </li><li class="clock-separator">:</li><li class="clock-hours"> ' + padNumber(hours) + ' <small>hrs</small> </li><li class="clock-separator">:</li><li class="clock-minutes"> ' + padNumber(minutes) + ' <small>min</small> </li><li class="clock-separator">:</li><li class="clock-seconds"> ' + padNumber(seconds) + ' <small>sec</small> </li></ul>';
}
if ( distance < 0 )
{
clearInterval(x);
for (var i = 0; i < timer.length; i++)
{
timer[i].innerHTML = "EXPIRED";
}
}
}, 1000);
function padNumber(number)
{
if( number == 0 )
{
number = "0" + number;
}
else if( number > 9 )
{
number;
}
else
{
number = "0" + number;
}
return number;
}
The <?=$endDate?> variable is passed from php. Its being passed correctly.
The number of timers to be displayed will be dynamic depending on the records in the database. The issue I'm facing is: I only get timer created from the first record. Its duplicated across all posts being displayed on the page. I suspect this has to do with my .t1-auction-timer class loop but I haven't figured it out yet.

You can try this approach which uses the data attribute.
var auctionTimer = document.getElementsByClassName('t1-auction-timer');
var interval = setInterval(function() {
if(auctionTimer.length == 0 ){clearFunction()}
for(var i= 0; i < auctionTimer.length; i++){
var endDate = auctionTimer[i].getAttribute('data-end-date')
var int = createTimer(endDate, auctionTimer[i]);
}
},1000)
function clearFunction() {
clearInterval(interval);
}
function createTimer(endDate, element){
var countDownDate = new Date(endDate).getTime();
var now = new Date().getTime();
var distance = countDownDate - now;
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);
element.innerHTML = '<ul class="clock-value"><li class="clock-days">' + padNumber(days) + '<small>days</small> </li><li class="clock-separator">:</li><li class="clock-hours"> ' + padNumber(hours) + ' <small>hrs</small> </li><li class="clock-separator">:</li><li class="clock-minutes"> ' + padNumber(minutes) + ' <small>min</small> </li><li class="clock-separator">:</li><li class="clock-seconds"> ' + padNumber(seconds) + ' <small>sec</small> </li></ul>';
if ( distance < 0 )
{
if ( element.classList.contains("t1-auction-timer") ){
element.classList.remove("t1-auction-timer")
element.classList.add("expierd")
expierd()
}
}
}
function padNumber(number)
{
if( number == 0 )
{
number = "0" + number;
}
else if( number > 9 )
{
number;
}
else
{
number = "0" + number;
}
return number;
}
function expierd(){
var expierdDate = document.getElementsByClassName('expierd');
for(var i= 0; i < expierdDate.length; i++){
expierdDate[i].innerHTML = "expierd"
}
}
<div class="t1-auction-timer" data-end-date="2021-01-03 16:15"></div>
<div class="t1-auction-timer" data-end-date="2021-01-01 16:15"></div>
<div class="t1-auction-timer" data-end-date="2021-01-04 16:15"></div>

An approach which directly uses a lot from the OP's code almost unchanged does, within an interval, process a collection of timer elements by (re)rendering each timer again and again.
A timer element's markup base will be the already above (in the comments) mentioned <time/> element where the the OP's endDate will be retrieved from this element's datetime attribute (also again and again) ...
function padNumber(number) {
return (number >= 10) && number || `0${ number }`;
}
function updateTimer(nodeList, timer, timerData) {
// GUARD
if (timer.dataset.isExpired === "true") {
return;
}
const countDownDate = new Date(timer.dateTime).getTime();
const now = new Date().getTime();
const distance = countDownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance >= 0) {
timer.innerHTML = `<ul class="clock-value">
<li class="clock-days">${ padNumber(days) } <small>days</small></li>
<li class="clock-hours">${ padNumber(hours) } <small>hrs</small></li>
<li class="clock-minutes">${ padNumber(minutes) } <small>min</small></li>
<li class="clock-seconds">${ padNumber(seconds) } <small>sec</small></li>
</ul>`;
} else {
timer.innerHTML = "EXPIRED";
timer.dataset.isExpired = "true";
// clear the interval only in case each timer has been expired.
if ([
...nodeList
].every(elmNode =>
elmNode.dataset.isExpired === "true"
)) {
clearInterval(timerData.timerId);
}
}
}
function updateAllTimers(nodeList, timerData) {
nodeList.forEach(timer => updateTimer(nodeList, timer, timerData));
}
function initializeAllTimers() {
const nodeList = document.querySelectorAll('.t1-auction-timer');
const data = {
timerId: null
};
updateAllTimers(nodeList, data);
data.timerId = setInterval(updateAllTimers, 1000, nodeList, data);
}
initializeAllTimers();
body {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 2px 10px 3px 10px;
}
li .auction-name {
font-family: courier;
}
ul.clock-value,
ul.clock-value > li {
padding: 0;
display: inline-block;
}
ul.clock-value > li {
font-family: ui-monospace;
}
ul.clock-value li:not(:last-child) small:after {
content: ":";
display: inline-block;
width: .7em;
font-weight: bold;
text-align: right;
}
<ul>
<li>
Auction <span class="auction-name">Foo</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-21 22:15">2020-12-21 22:15</time>
</li>
<li>
Auction <span class="auction-name">Bar</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-22 03:15">2020-12-22 03:15</time>
</li>
<li>
Auction <span class="auction-name">Baz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-22 11:30">2020-12-22 11:30</time>
</li>
<li>
Auction <span class="auction-name">Biz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-22 14:45">2020-12-22 14:45</time>
</li>
<li>
Auction <span class="auction-name">Buz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-23 10:20">2020-12-23 10:20</time>
</li>
<li>
Auction <span class="auction-name">Fiz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-24 10:55">2020-12-24 10:55</time>
</li>
<li>
Auction <span class="auction-name">Faz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2021-01-04 16:15">2021-01-04 16:15</time>
</li>
</ul>
The above approach might be changed towards creating a list of already pre-rendered timer components where each component's update is not anymore based on assigning a huge piece of always newly created HTML markup to a DOM node's innerHTML.
In order to enable a more generic / flexible usage of such components, one now can pass a template-string of custom timer-markup as well as a custom "expired" message to the initializing method. In addition any component now gets identified by its data-countdown-component attribute which makes the creation / initialization process independent from any forced or just layout-related CSS class-names.
function emptyElementNode(elmNode) {
Array
.from(elmNode.childNodes)
.forEach(node => node.remove());
}
function createTemplateFromMarkup(templateMarkup) {
const container = document.createElement('div');
container.innerHTML = String(templateMarkup);
return container.firstElementChild;
}
function getTimeMeasureFromMilliseconds(value) {
let days = (value / 3600000 / 24);
let hours = ((days - Math.floor(days)) * 24);
let minutes = ((hours - Math.floor(hours)) * 60);
let seconds = ((minutes - Math.floor(minutes)) * 60);
days = Math.floor(days);
hours = Math.floor(hours);
minutes = Math.floor(minutes);
seconds = Math.floor(seconds + 0.001);
seconds = ((seconds < 60) && seconds) || 0;
minutes = ((minutes < 60) && minutes) || 0;
hours = ((hours < 24) && hours) || 0;
return { days, hours, minutes, seconds };
}
function formatMeasure(value) {
return ((value >= 10) && value || `0${ value }`);
}
function createTimerComponent(rootNode, template, expiredMessage) {
const expirationDate = new Date(rootNode.dateTime);
const [
elmDays,
elmHours,
elmMinutes,
elmSeconds
] = [...template.querySelectorAll([
'[data-countdown-days]',
'[data-countdown-hours]',
'[data-countdown-minutes]',
'[data-countdown-seconds]',
].join(','))];
const component = {
rootNode,
elmDays,
elmHours,
elmMinutes,
elmSeconds,
isExpired: false,
expiredMessage,
expiresTimestamp: expirationDate.getTime(),
};
emptyElementNode(component.rootNode);
rootNode.dateTime = expirationDate.toUTCString();
rootNode.appendChild(template);
return component;
}
function updateTimer(componentList, component, timerData) {
// GUARD
if (component.isExpired) {
return;
}
const { dateNow } = timerData;
const { expiresTimestamp } = component;
const { elmDays, elmHours, elmMinutes, elmSeconds } = component;
const time = (expiresTimestamp - dateNow);
if (time >= 0) {
const measures = getTimeMeasureFromMilliseconds(time);
elmSeconds.textContent = formatMeasure(measures.seconds);
elmMinutes.textContent = formatMeasure(measures.minutes);
elmHours.textContent = formatMeasure(measures.hours);
elmDays.textContent = formatMeasure(measures.days);
} else {
component.isExpired = true;
emptyElementNode(component.rootNode);
component.rootNode.textContent = component.expiredMessage;
// clear the interval only in case each timer has been expired.
if (componentList.every(item => item.isExpired)) {
clearInterval(timerData.timerId);
}
}
}
function updateAllTimers(componentList, timerData) {
timerData.dateNow = Date.now();
componentList.forEach(component =>
updateTimer(componentList, component, timerData)
);
}
function initializeAllTimers(templateMarkup, expiredMessage = 'Closed') {
const defaultTemplateMarkup = [
'<span>',
'<span data-countdown-days></span> <small>days</small>, ',
'<span data-countdown-hours></span> <small>hours</small>, ',
'<span data-countdown-minutes></span> <small>minutes</small>, ',
'<span data-countdown-seconds></span> <small>seconds</small>',
'</span>',
].join('');
let template = createTemplateFromMarkup(templateMarkup);
if (!template || template.querySelectorAll([
'[data-countdown-days]',
'[data-countdown-hours]',
'[data-countdown-minutes]',
'[data-countdown-seconds]',
].join(',')).length !== 4) {
template = createTemplateFromMarkup(defaultTemplateMarkup);
}
const componentList = [
...document.querySelectorAll('[data-countdown-component]')
].map(elmNode =>
createTimerComponent(elmNode, template.cloneNode(true), expiredMessage)
);
const data = {
timerId: null,
dateNow: null,
};
updateAllTimers(componentList, data);
data.timerId = setInterval(updateAllTimers, 1000, componentList, data);
}
initializeAllTimers(`<ul class="clock-value">
<li class="clock-days">
<span data-countdown-days></span> <small>days</small>
</li>
<li class="clock-hours">
<span data-countdown-hours></span> <small>hours</small>
</li>
<li class="clock-minutes">
<span data-countdown-minutes></span> <small>minutes</small>
</li>
<li class="clock-seconds">
<span data-countdown-seconds></span> <small>seconds</small>
</li>
</ul>`, 'Expired');
body {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 2px 10px 3px 10px;
}
li .auction-name {
font-family: courier;
}
ul.clock-value,
ul.clock-value > li {
padding: 0;
display: inline-block;
}
ul.clock-value > li {
font-family: ui-monospace;
}
ul.clock-value li:not(:last-child) small:after {
content: ":";
display: inline-block;
width: .7em;
font-weight: bold;
text-align: right;
}
<ul>
<li>
Auction <span class="auction-name">Foo</span> expires at/in ...
<time data-countdown-component datetime="2020-12-21 22:15">2020-12-21 22:15</time>
</li>
<li>
Auction <span class="auction-name">Bar</span> expires at/in ...
<time data-countdown-component datetime="2020-12-22 03:15">2020-12-22 03:15</time>
</li>
<li>
Auction <span class="auction-name">Baz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-22 11:30">2020-12-22 11:30</time>
</li>
<li>
Auction <span class="auction-name">Biz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-22 14:45">2020-12-22 14:45</time>
</li>
<li>
Auction <span class="auction-name">Buz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-23 10:20">2020-12-23 10:20</time>
</li>
<li>
Auction <span class="auction-name">Fiz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-24 10:55">2020-12-24 10:55</time>
</li>
<li>
Auction <span class="auction-name">Faz</span> expires at/in ...
<time data-countdown-component datetime="2021-01-04 16:15">2021-01-04 16:15</time>
</li>
</ul>

How to add additional times to my counter?

I'm trying to build a countdown clock that goes from one date to the next. An example would be a count down to Halloween then to Thanksgiving. When the countdown reaches zero, I want the counter to restart and count down to the next holiday.
I've tried separating the events and labeling them differently to target them independently. ANy ideas would be great, this has me stuck.
<div class="container">
<p id="timer">
<span id="timer-days"></span>
<span id="timer-hours"></span>
<span id="timer-minutes"></span>
<span id="timer-seconds"></span>
</p>
</div>
<script>
var holidazeEnd=new Date("Jun, 9 2019 18:19:00").getTime();
var holidazeEnd1=new Date("Jun, 9 2019 18:20:00").getTime();
var timer= setInterval(function(){
let now=new Date().getTime();
let t=holidazeEnd - now;
if (t >= 0)
{
let days = Math.floor(t / (1000 * 60 * 60 * 24));
let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let secs = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("timer-days").innerHTML=days+"<span class= 'label'> Days</span>";
document.getElementById("timer-hours").innerHTML=("0"+hours).slice(-2)+"<span class= 'label'> Hours</span>";
document.getElementById("timer-minutes").innerHTML=("0"+mins).slice(-2)+"<span class= 'label'> Minutes</span>";
document.getElementById("timer-seconds").innerHTML=("0"+secs).slice(-2)+"<span class= 'label'> Seconds</span>";
}
else{
document.getElementById("timer").innerHtml=("Happy Independence Day!");}
},1000)
//---------------------------------------------//
var timer1= setInterval(function(){
let now=new Date().getTime();
let t=holidazeEnd1 - now;
if (t >= 0) {
let days1 = Math.floor(t / (1000 * 60 * 60 * 24));
let hours1 = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let mins1 = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let secs1 = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("timer-days").innerHTML=days1+"<span class= 'label'> Days</span>";
document.getElementById("timer-hours").innerHTML=("0"+hours1).slice(-2)+"<span class= 'label'> Hours</span>";
document.getElementById("timer-minutes").innerHTML=("0"+mins1).slice(-2)+"<span class= 'label'> Minutes</span>";
document.getElementById("timer-seconds").innerHTML=("0"+secs1).slice(-2)+"<span class= 'label'> Seconds</span>";
}
else
document.getElementById("timer1").innerHtml="Merry Xmas!";}
,1000);
countdown(holidazeEnd,timer);
countdown(holidazeEnd1,timer1)

What about to use a single setInterval and an array of holidays?
const holidays = [
{
running: "Independence Day",
complete: "Happy Independence Day!",
time: "July 4 2019"
},
{
running: "Christmas",
complete: "Merry Xmas!",
time: "Dec 10 2019"
}
];
We need to know the next holiday to track:
//Get the next holiday index
const nextHolidayIndex = () => holidays.reduce((prevResult,current, i) => {
const timeDif = Date.parse(current.time) - Date.now();
if(timeDif < 0)
return prevResult;
if(prevResult.index == -1 || timeDif < prevResult.diff) return {
index : i,
diff: timeDif
};
return prevResult;
}, {index : -1, diff: 0}).index;
The time remaining, like you did:
//Get time remaining for a given time
const getTimeRemaining = (timeTime) =>{
const t = Date.parse(timeTime) - Date.now();
const seconds = Math.floor( (t/1000) % 60 );
const minutes = Math.floor( (t/1000/60) % 60 );
const hours = Math.floor( (t/(1000*60*60)) % 24 );
const days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
And we need to initialize the component:
const initializeClock = (id, nextHoliday) => {
const clock = document.getElementById(id);
const message = clock.querySelector('.message');
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
let interval
function updateClock() {
const t = getTimeRemaining(nextHoliday.time);
daysSpan.innerHTML = t.days.toString();
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(interval);
message.innerHTML = nextHoliday.complete
}
}
message.innerHTML = `${nextHoliday.running}`
updateClock();
interval = setInterval(updateClock, 1000);
}
How about the html ?
<div id="timer">
<h1 class="message"></h1>
<div class="countdown">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
Putting some visual to it:
#timer{
text-align: center;
background: #efefef;
font-family: sans-serif;
font-weight: 100;
display: inline-flex;
flex-direction: column;
padding: 24px;
}
h1{
color: #969696;
font-weight: 100;
font-size: 40px;
margin: 0 0 15px 0;
}
#timer .countdown{
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#timer .countdown > div{
padding: 10px;
border-radius: 3px;
background: #6f7b75;
display: inline-block;
}
#timer .countdown div > span{
padding: 15px;
border-radius: 3px;
background: #03A9F4;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
Then we just run the code:
const next = nextHolidayIndex()
if(next != -1){
initializeClock('timer', holidays[next]);
}
Here you go :)
const holidays = [
{
running: "Independence Day",
complete: "Happy Independence Day!",
time: "July 4 2019"
},
{
running: "Christmas",
complete: "Merry Xmas!",
time: "Dec 10 2019"
}
];
//Get the next holiday index
const nextHolidayIndex = () => holidays.reduce((prevResult,current, i) => {
const timeDif = Date.parse(current.time) - Date.now();
if(timeDif < 0)
return prevResult;
if(prevResult.index == -1 || timeDif < prevResult.diff) return {
index : i,
diff: timeDif
};
return prevResult;
}, {index : -1, diff: 0}).index;
//Get time remaining for a given time
const getTimeRemaining = (timeTime) =>{
const t = Date.parse(timeTime) - Date.now();
const seconds = Math.floor( (t/1000) % 60 );
const minutes = Math.floor( (t/1000/60) % 60 );
const hours = Math.floor( (t/(1000*60*60)) % 24 );
const days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
const initializeClock = (id, nextHoliday) => {
const clock = document.getElementById(id);
const message = clock.querySelector('.message');
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
let interval
function updateClock() {
const t = getTimeRemaining(nextHoliday.time);
daysSpan.innerHTML = t.days.toString();
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(interval);
message.innerHTML = nextHoliday.complete
startNext()
}
}
message.innerHTML = `${nextHoliday.running}`
updateClock();
interval = setInterval(updateClock, 1000);
}
const startNext = () => {
const next = nextHolidayIndex()
if(next != -1){
initializeClock('timer', holidays[next]);
}
}
startNext()
#timer{
text-align: center;
background: #efefef;
font-family: sans-serif;
font-weight: 100;
display: inline-flex;
flex-direction: column;
padding: 24px;
}
h1{
color: #969696;
font-weight: 100;
font-size: 40px;
margin: 0 0 15px 0;
}
#timer .countdown{
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#timer .countdown > div{
padding: 10px;
border-radius: 3px;
background: #6f7b75;
display: inline-block;
}
#timer .countdown div > span{
padding: 15px;
border-radius: 3px;
background: #03A9F4;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
<div id="timer">
<h1 class="message"></h1>
<div class="countdown">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
In order to restart the counter we need to refresh the page. If you don't want it then, forget about the message, and just init the next after the previous reach 0.
const initializeClock = (id, nextHoliday) => {
//...
if (t.total <= 0) {
clearInterval(interval);
startNext()
}
//...
}
const startNext = () => {
const next = nextHolidayIndex()
if(next != -1){
initializeClock('timer', holidays[next]);
}
}
startNext()

I think this example goes around the question:
- you can add as many dates as you want,
- adjust the end date of their presentation before moving on to the next countdown.
I do some changing for cosmetic reasons...
// Set all the dates you want (no order needed)
const holidays = [
{ dat: 'July, 3 YYYY 23:59:59', end: 'July, 4 YYYY 23:59:59', msg:'Happy Independence Day!', bef:'Independence Day', Bcolor : '#39CCCC' }
, { dat: 'Dec, 24 YYYY 23:59:59', end: 'Dec, 26 YYYY 12:00:00', msg:'Merry Xmas!', bef:'Xmas', Bcolor : '#2ECC40' }
, { dat: 'Oct, 31 YYYY 17:59:59', end: 'Nov, 1 YYYY 06:00:00', msg:'Happy Halloween!', bef:'Halloween', Bcolor : '#F012BE' }
, { dat: 'Dec, 31 YYYY 23:59:59', end: 'Jan, 1 Y+1Y 01:00:00', msg:'Happy New Year!', bef:'New Year', Bcolor : '#FFDC00' }
];
// please note the use of 'YYYY' stand for 'any Year' and 'Y+1Y' stand fort 'any Following Year' for events repeating each year.
// Real year values are ok but old events will be ignored
// The color is here for example, you can disable it or change the idea by placing a picture in the background,
// and do the same countdown for each species
// Ready for everything:
const BODY_color = '#554a63' // standard Color of Background
, timer_on = document.querySelector('#timer-on')
, timer_off = document.querySelector('#timer-off')
, curDT = document.getElementById('currentDateTime')
, tCountDown = document.querySelectorAll('#countdown div span')
, xDays = 0
, xHours = 2
, xMins = 4
, xSecs = 6
, t_msg = document.querySelector('#timer-on h2')
, H_message = document.querySelector('#timer-off h1')
, one_Sec = 1000
, one_Min = one_Sec * 60
, one_Hour = one_Min * 60
, one_Day = one_Hour * 24
, Option_DT = { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'}
, Intl_F_DT = new Intl.DateTimeFormat('en-US', Option_DT )
;
/* Search function to set the countDown target
do : set interface to correct closest countdown
even if it is during a period before ending event
return : (js object )
start : time target of event
ending : time target of event ending
complete : Boolean value (set to false) according to the countdown is not completed
Bcolor : paint color value for background during ending period
*/
function SetNextHolidayTarget()
{
let now = new Date()
, nowTime = now.getTime()
, thisYear = now.getFullYear()
, closest = one_Day *365 /// start with big closest date
, target = null
;
// default display
timer_on.classList.remove('noDisplay')
timer_off.classList.add('noDisplay')
document.body.style.backgroundColor = BODY_color;
holidays.forEach(H=> // search loop for the closest date in 'holidays'
{
let s_date = H.dat.replace('YYYY', thisYear ) // change 'YYYY' string to current year value
, e_date = H.end.replace('YYYY', thisYear ).replace('Y+1Y', (thisYear +1) )
, t_date = new Date(s_date) // target date
, z_date = new Date(e_date) // target date ending
;
if ( t_date < now && z_date < now ) // if target date and ending are before today, this set them for next year
{
s_date = H.dat.replace('YYYY', (thisYear +1))
e_date = H.end.replace('YYYY', (thisYear +1)).replace('Y+1Y', (thisYear +2) )
t_date = new Date(s_date)
z_date = new Date(e_date)
}
let t_datesDiff = t_date.getTime() - nowTime
, z_datesDiff = z_date.getTime() - nowTime
if ( closest > t_datesDiff && t_datesDiff > 0 ) // if it is closer than the dates already seen
{
closest = t_datesDiff
t_msg.textContent = H.bef
H_message.textContent = H.msg
target = { start: t_date.getTime(), ending: z_date.getTime(), complete: false, Bcolor: H.Bcolor }
}
if ( closest > z_datesDiff && z_datesDiff > 0 ) // case of inside countdown period
{
closest = z_datesDiff
t_msg.textContent = H.bef
H_message.textContent = H.msg
target = { start: z_date.getTime(), ending: z_date.getTime(), complete: true, Bcolor: H.Bcolor }
}
})
if ( target.complete ) // if inside countdown period
{
timer_on.classList.add('noDisplay')
timer_off.classList.remove('noDisplay')
document.body.style.backgroundColor = target.Bcolor;
}
return target
}
// **** INIT ****
var holidazeEnd = SetNextHolidayTarget()
// first TEST to prove -------------------------------------------------------------------
if (true) // (set to false to remove this test)
{
let now = new Date()
, start = new Date()
, ending = new Date()
;
// default display
timer_on.classList.remove('noDisplay')
timer_off.classList.add('noDisplay')
document.body.style.backgroundColor = BODY_color;
start.setTime(now.getTime() + (one_Sec *20) );
ending.setTime(start.getTime() + (one_Sec *15) );
t_msg.textContent = 'Test to 20s'
H_message.textContent = 'happy test ! (15s)'
holidazeEnd = { start , ending , complete: false, Bcolor: 'orange' }
} // =====================================================================================
// TIMER Interval //
// - - - - - - - - //
var timerInterval = setInterval(function ()
{
let now = new Date()
, t = holidazeEnd.start - now.getTime()
;
curDT.textContent = Intl_F_DT.format(now) // show date time upper right
if (t >= 0 )
{
if (!holidazeEnd.complete)
{
tCountDown[xDays].textContent = Math.floor(t / one_Day);
tCountDown[xHours].textContent = ('0' + Math.floor((t % one_Day) / one_Hour)).slice(-2);
tCountDown[xMins].textContent = ('0' + Math.floor((t % one_Hour) / one_Min)).slice(-2);
tCountDown[xSecs].textContent = ('0' + Math.floor((t % one_Min) / one_Sec)).slice(-2);
}
// else { nothing to do }
}
else // elapsed time !
{
if ( holidazeEnd.complete ) // elapsed time of ' holiday ' message
{
holidazeEnd = SetNextHolidayTarget() // searching the next one in the ' holidays ' list
}
else // show ' holiday ' message
{
timer_on.classList.add('noDisplay')
timer_off.classList.remove('noDisplay')
holidazeEnd.complete = true;
holidazeEnd.start = holidazeEnd.ending
document.body.style.backgroundColor = holidazeEnd.Bcolor
}
}
}, 1000);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #554a63;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#currentDateTime {
text-align: right;
padding: .2em 1em 0 0;
color: white;
font-weight: lighter;
font-stretch: expanded
}
.noDisplay {
display:none !important
}
.timer{
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
transform: translateY(-50%);
}
.timer h1 {
text-align: center;
font-size: 4em;
font-weight: bold;
color: white;
background-color: rgba(96, 87, 151, 0.315);
padding: .8em 0;
}
.timer h2 {
text-align: center;
padding: .3em 0;
}
#countdown {
display: table;
margin: 0 auto;
padding: 1em 0;
background-color: rgba(96, 87, 151, 0.315);
min-width: 26em;
}
#countdown div {
display: block;
float: left;
height: 5em;
width: 6em;
border-right: 1px solid grey;
}
#countdown div:first-child {
width: 8em;
}
#countdown div:last-child {
border-right: none;
}
#countdown div span {
display: inline-block;
width: 100%;
text-align: center;
color: white
}
#countdown div span:first-child {
font-size: 3em;
}
#countdown div span:last-child {
font-size: .8em;
padding: 1em .2em;
}
<p id="currentDateTime"></p>
<div id="timer-on" class="timer">
<h2> .. </h2>
<div id="countdown">
<div><span>.</span><span>Days</span></div>
<div><span>.</span><span>Hours</span></div>
<div><span>.</span><span>Minutes</span></div>
<div><span>.</span><span>Seconds</span></div>
</div>
</div>
<div id="timer-off" class="timer noDisplay">
<h1>!</h1>
</div>

Javascript loop countdown timer

function timer()
{
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10)
{
minutes = "0" + minutes
}
if (hours < 6)
{
var hoursLeft = 5 – hours;
var minsLeft = 60 – minutes;
if(minsLeft==60)
{
minsLeft=0;
hoursLeft++;
}
var secsLeft = 60 – seconds;
if(secsLeft==60)
{
secsLeft=0;
minsLeft++;
}
}
else if (hours < 18)
{
var hoursLeft = 17 – hours;
var minsLeft = 60 – minutes;
if(minsLeft==60)
{
minsLeft=0;
hoursLeft++;
}
var secsLeft = 60 – seconds;
if(secsLeft==60)
{
secsLeft=0;
minsLeft++;
}
}
else if (hours < 24)
{
var hoursLeft = 29 – hours;
var minsLeft = 60 – minutes;
if(minsLeft==60)
{
minsLeft=0;
hoursLeft++;
}
var secsLeft = 60 – seconds;
if(secsLeft==60)
{
secsLeft=0;
minsLeft++;
}
}
else if (hours == 6)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("reset.html", true);
xmlhttp.send();
}
else if (hours == 18)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("reset.html", true);
xmlhttp.send();
}
else
{
document.write("Error, please contact admin");
}
document.getElementById('timerUpFront').innerHTML= hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds";
}
var countdownTimer = setInterval('timer()', 1000);
#timerUpFront
{
color:#009DE3;
}
#timer
{
font-family: "Comic Sans MS", cursive, sans-serif;
margin-top: 20px;
font-size:36px;
text-align:center;
}
#button
{
background-color:#008CFF;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:26px;
width:160px;
padding: 10px;
margin: 2em auto;
margin-top: 10px;
}
<html>
<head>
<title>Timer</title>
</head>
<body>
<div id="timer">
<span id="timerUpFront"></span>
<br><br>
<div id="button">
<center>Reset</center>
</div>
</div>
</body>
</html>
Trying to create an automated countdown timer that should reset it self back to once reach 0:00:00 or once the button is pressed but does not reset on page refresh.
I have been trying for hours but couldn't get the timer to display, couldn't find any mistake in .js file my self to display. As my last option had to ask on this site.

I'm not sure if someone pranked you or something, but you're using a bigger dash character (I'm not sure what that's called), instead of a regular minus sign. I replaced – with -.
function timer()
{
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10)
{
minutes = "0" + minutes
}
if (hours < 6)
{
var hoursLeft = 5 - hours;
var minsLeft = 60 - minutes;
if(minsLeft==60)
{
minsLeft=0;
hoursLeft++;
}
var secsLeft = 60 - seconds;
if(secsLeft==60)
{
secsLeft=0;
minsLeft++;
}
}
else if (hours < 18)
{
var hoursLeft = 17 - hours;
var minsLeft = 60 - minutes;
if(minsLeft==60)
{
minsLeft=0;
hoursLeft++;
}
var secsLeft = 60 - seconds;
if(secsLeft==60)
{
secsLeft=0;
minsLeft++;
}
}
else if (hours < 24)
{
var hoursLeft = 29 - hours;
var minsLeft = 60 - minutes;
if(minsLeft==60)
{
minsLeft=0;
hoursLeft++;
}
var secsLeft = 60 - seconds;
if(secsLeft==60)
{
secsLeft=0;
minsLeft++;
}
}
else if (hours == 6)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("reset.html", true);
xmlhttp.send();
}
else if (hours == 18)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("reset.html", true);
xmlhttp.send();
}
else
{
document.write("Error, please contact admin");
}
document.getElementById('timerUpFront').innerHTML= hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds";
}
var countdownTimer = setInterval('timer()', 1000);
#timerUpFront
{
color:#009DE3;
}
#timer
{
font-family: "Comic Sans MS", cursive, sans-serif;
margin-top: 20px;
font-size:36px;
text-align:center;
}
#button
{
background-color:#008CFF;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:26px;
width:160px;
padding: 10px;
margin: 2em auto;
margin-top: 10px;
}
<html>
<head>
<title>Timer</title>
</head>
<body>
<div id="timer">
<span id="timerUpFront"></span>
<br><br>
<div id="button">
<center>Reset</center>
</div>
</div>
</body>
</html>

Upcounter with Momentjs

My problem is that my upcounter lost 1 day.
if i set the endDateTime to 1 year and 1 day before or after today it show the right time, but if i set it to exactly 1 year before today it shows the wrong day and month. And if i put the code of updateTimer to fiddlejs.net and test it if it shows the right time than is everything right.
sorry for my bad english :)
function updateTimer() {
//change endDateTime to your actual time minus 1 year
var endDateTime = new moment("2016-04-03 4:00:00");
var startDateTime = moment();
var timeLeft = endDateTime + startDateTime;
var timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var years = Math.floor(moment.duration(timeLeft).asYears());
startDateTime = startDateTime.subtract(years, 'years');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var months = Math.floor(moment.duration(timeLeft).asMonths());
startDateTime = startDateTime.subtract(months, 'months');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var days = Math.floor(moment.duration(timeLeft).asDays());
startDateTime = startDateTime.subtract(days, 'days');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var hours = Math.floor(moment.duration(timeLeft).asHours());
startDateTime = startDateTime.subtract(hours, 'hours');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var minutes = Math.floor(moment.duration(timeLeft).asMinutes());
startDateTime = startDateTime.subtract(minutes, 'minutes');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var seconds = Math.floor(moment.duration(timeLeft).asSeconds());
var total = timeLeft;
if (years < 10) years = "0" + years;
if (months < 10) months = "0" + months;
if (days < 10) days = "0" + days;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
return {
'years': years,
'months': months,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds,
'total': total,
}
}
function animateClock(span) {
span.className = "turn";
setTimeout(function() {
span.className = "";
}, 700);
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var yearsSpan = clock.querySelector('.years');
var monthsSpan = clock.querySelector('.months');
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = updateTimer();
yearsSpan.innerHTML = t.years;
monthsSpan.innerHTML = ('0' + t.months).slice(-2);
daysSpan.innerHTML = ('0' + t.days).slice(-2);
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
//animation
// var daysMonth = moment(t.years-t.months-t.days).daysInMonth('month');
var spans = clock.getElementsByTagName("span");
animateClock(spans[5]);
if (t.seconds == 0) animateClock(spans[4]);
if (t.minutes == 59 && t.seconds == 59) animateClock(spans[3]);
if (t.hours == 23 && t.minutes == 59 && t.seconds == 59) animateClock(spans[2]);
//if (t.months == daysMonth && t.hours == 23 && t.minutes == 59 && t.seconds == 59) animateClock(spans[1]);
// if (t.total <= 0) {
// clearInterval(timeinterval);
// }
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
#clockdiv {
font-family: sans-serif;
color: #2DA2DB;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv>div {
margin-bottom: 5px;
padding: 6px;
border-radius: 3px;
background: #991b1f;
display: inline-block;
border-style: solid;
border-color: black;
}
#clockdiv>div:nth-child(2) {
background: #aa1e23;
}
#clockdiv>div:nth-child(3) {
background: #bc2025;
}
#clockdiv>div:nth-child(4) {
background: #cc2027;
}
#clockdiv>div:nth-child(5) {
background: #dc1f26;
}
#clockdiv>div:nth-child(6) {
background: #ec1e24;
}
#clockdiv div>span {
font-size: 30px;
letter-spacing: 3px;
font-family: 'pixel', monospace;
color: #white;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
padding: 6px;
border-radius: 3px;
background: #333;
display: inline-block;
border-style: solid;
border-color: black;
}
<script src="http://momentjs.com/downloads/moment.js"></script>
<div id="clockdiv">
<div>
<span class="years"></span>
<div class="smalltext">Jahre</div>
</div>
<div>
<span class="months"></span>
<div class="smalltext">Monate</div>
</div>
<div>
<span class="days"></span>
<div class="smalltext">Tage</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Stunden</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minuten</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Sekunden</div>
</div>
</div>

Control the max number of divs on page

I programmed this countdown. How can I control the max number of divs displaying on the page. Example: Thare are 20 countdowns on the page but only 5 are displaying(visible) to user.
EDIT: Now there are 19 countdown displaying on page, how can I set
that thare are max 7 countdown displaying on page?
Here is the code:  
                                                                               
<html>
<head>
<meta charset="utf-8">
<title>Tramvaj.info</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="shortcut icon" type="image/png" href="favi.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
#header_container { background:#1f62a7; border:0px solid #1f62a7; height:35px; left:0; position:relative; width:100%; top:0; }
#headermenu {
width:100%;
height:100%;
position:relative;
top:-8px;
background-color: rgba(255,255,255,0.6);
}
.headermenu {
width: 150px;
height: 26px;
padding-top:15px;
display: block;
float: left;
text-align: center;
text-decoration: none!important;
text-transform: uppercase;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 15px;
letter-spacing: 2px;
color: #ffffff!important;
transition: all .5s ease;
}
#page-wrap { width: 230px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 30px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
a { color: inherit;
text-decoration: none;
}
#dani1Box, #sati1Box, #minute1Box, #sekunde1Box, #dani2Box, #sati2Box, #minute2Box, #sekunde2Box, #dani3Box, #sati3Box, #minute3Box, #sekunde3Box, #dani4Box, #sati4Box, #minute4Box, #sekunde4Box,
#dani5Box, #sati5Box, #minute5Box, #sekunde5Box, #dani6Box, #sati6Box, #minute6Box, #sekunde6Box, #dani7Box, #sati7Box, #minute7Box, #sekunde7Box, #dani8Box, #sati8Box, #minute8Box, #sekunde8Box,
#dani9Box, #sati9Box, #minute9Box, #sekunde9Box, #dani10Box, #sati10Box, #minute10Box, #sekunde10Box, #dani11Box, #sati11Box, #minute11Box, #sekunde11Box, #dani12Box, #sati12Box, #minute12Box, #sekunde12Box, #dani1Box, #sati13Box, #minute13Box, #sekunde13Box, #dani14Box, #sati14Box, #minute14Box, #sekunde14Box, #dani15Box, #sati15Box, #minute15Box, #sekunde15Box, #dani16Box, #sati16Box, #minute16Box, #sekunde16Box, #dani17Box, #sati17Box, #minute17Box, #sekunde17Box, #dani18Box, #sati18Box, #minute18Box, #sekunde18Box, #dani19Box, #sati19Box, #minute19Box, #sekunde19Box, #dani20Box, #sati20Box, #minute20Box, #sekunde20Box{
font-size:25px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}
</style>
</head>
<body>
<div id="header_container">
<div id="header"></div>
<div align="center">
<div id="headermenu">
SVE STANICE
HOME
</div>
</div>
<div id="page-wrap">
<script>
var d = new Date();
var n = d.getDay();
//if(n == 1 || n == 2 || n == 3 || n == 4 || n == 5){
var timer1;
function cdtd1() {
var sad1 = new Date();
var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),18,00,00);
var timeDiff1 = dolazak1.getTime() - sad1.getTime();
if (timeDiff1 <= 0) {
clearInterval(timer1);
$("#Box1").remove();
}
var sekunde1 = Math.floor(timeDiff1 / 1000);
var minute1 = Math.floor(sekunde1 / 60);
var sati1 = Math.floor(minute1 / 60);
var dani1 = Math.floor(sati1 / 24);
sati1 %= 24;
minute1 %= 60;
sekunde1 %= 60;
$("#dani1Box").html(dani1);
$("#sati1Box").html('7-Dubrava ' + sati1 + ':');
$("#minute1Box").html(minute1 + ':');
$("#sekunde1Box").html(sekunde1);
timer1 = setTimeout(cdtd1, 1000);
}
$(document).ready(function() {
cdtd1();
});
//--------------------------------------------------------------------------------------------------
var timer2;
function cdtd2() {
var sad2 = n
ew Date();
var dolazak2 = new Date(sad2.getFullYear(),sad2.getMonth(),sad2.getDate(),18,00,00);
var timeDiff2 = dolazak2.getTime() - sad2.getTime();
if (timeDiff2 <= 0) {
clearInterval(timer2);
$("#Box2").remove();
}
var sekunde2 = Math.floor(timeDiff2 / 1000);
var minute2 = Math.floor(sekunde2 / 60);
var sati2 = Math.floor(minute2 / 60);
var dani2 = Math.floor(sati2 / 24);
sati2 %= 24;
minute2 %= 60;
sekunde2 %= 60;
$("#dani2Box").html(dani2);
$("#sati2Box").html('7-Dubrava ' + sati2 + ':');
$("#minute2Box").html(minute2 + ':');
$("#sekunde2Box").html(sekunde2);
timer2 = setTimeout(cdtd2, 1000);
}
$(document).ready(function() {
cdtd2();
});
//----------------------------------------------------------------------------------
var timer3;
function cdtd3() {
var sad3 = new Date();
var dolazak3 = new Date(sad3.getFullYear(),sad3.getMonth(),sad3.getDate(),18,00,00);
var timeDiff3 = dolazak3.getTime() - sad3.getTime();
if (timeDiff3 <= 0) {
clearInterval(timer3);
$("#Box3").remove();
}
var sekunde3 = Math.floor(timeDiff3 / 1000);
var minute3 = Math.floor(sekunde3 / 60);
var sati3 = Math.floor(minute3 / 60);
var dani3 = Math.floor(sati3 / 24);
sati3 %= 24;
minute3 %= 60;
sekunde3 %= 60;
$("#dani3Box").html(dani3);
$("#sati3Box").html('7-Dubrava ' + sati3 + ':');
$("#minute3Box").html(minute3 + ':');
$("#sekunde3Box").html(sekunde3);
timer3 = setTimeout(cdtd3, 1000);
}
$(document).ready(function() {
cdtd3();
});
//-----------------------------------------------------------------------------------------
var timer4;
function cdtd4() {
var sad4 = new Date();
var dolazak4 = new Date(sad4.getFullYear(),sad4.getMonth(),sad4.getDate(),18,00,00);
var timeDiff4 = dolazak4.getTime() - sad4.getTime();
if (timeDiff4 <= 0) {
clearInterval(timer4);
$("#Box4").remove();
}
var sekunde4 = Math.floor(timeDiff4 / 1000);
var minute4 = Math.floor(sekunde4 / 60);
var sati4 = Math.floor(minute4 / 60);
var dani4 = Math.floor(sati4 / 24);
sati4 %= 24;
minute4 %= 60;
sekunde4 %= 60;
$("#dani4Box").html(dani4);
$("#sati4Box").html('7-Dubrava ' + sati4 + ':');
$("#minute4Box").html(minute4 + ':');
$("#sekunde4Box").html(sekunde4);
timer4 = setTimeout(cdtd4, 1000);
}
$(document).ready(function() {
cdtd4();
});
var timer5;
function cdtd5() {
var sad5 = new Date();
var dolazak5 = new Date(sad5.getFullYear(),sad5.getMonth(),sad5.getDate(),18,00,00);
var timeDiff5 = dolazak5.getTime() - sad5.getTime();
if (timeDiff5 <= 0) {
clearInterval(timer5);
$("#Box5").remove();
}
var sekunde5 = Math.floor(timeDiff5 / 1000);
var minute5 = Math.floor(sekunde5 / 60);
var sati5 = Math.floor(minute5 / 60);
var dani5 = Math.floor(sati5 / 24);
sati5 %= 24;
minute5 %= 60;
sekunde5 %= 60;
$("#dani5Box").html(dani5);
$("#sati5Box").html('14-Zapruđe ' + sati5 + ':');
$("#minute5Box").html(minute5 + ':');
$("#sekunde5Box").html(sekunde5);
timer5 = setTimeout(cdtd5, 1000);
}
$(document).ready(function() {
cdtd5();
});
var timer6;
function cdtd6() {
var sad6 = new Date();
var dolazak6 = new Date(sad6.getFullYear(),sad6.getMonth(),sad6.getDate(),18,00,00);
var timeDiff6 = dolazak6.getTime() - sad6.getTime();
if (timeDiff6 <= 0) {
clearInterval(timer6);
$("#Box6")
.remove();
}
var sekunde6 = Math.floor(timeDiff6 / 1000);
var minute6 = Math.floor(sekunde6 / 60);
var sati6 = Math.floor(minute6 / 60);
var dani6 = Math.floor(sati6 / 24);
sati6 %= 24;
minute6 %= 60;
sekunde6 %= 60;
$("#dani6Box").html(dani6);
$("#sati6Box").html('7-Dubrava ' + sati6 + ':');
$("#minute6Box").html(minute6 + ':');
$("#sekunde6Box").html(sekunde6);
timer6 = setTimeout(cdtd6, 1000);
}
$(document).ready(function() {
cdtd6();
});
var timer7;
function cdtd7() {
var sad7 = new Date();
var dolazak7 = new Date(sad7.getFullYear(),sad7.getMonth(),sad7.getDate(),18,00,00);
var timeDiff7 = dolazak7.getTime() - sad7.getTime();
if (timeDiff7 <= 0) {
clearInterval(timer7);
$("#Box7").remove();
}
var sekunde7 = Math.floor(timeDiff7 / 1000);
var minute7 = Math.floor(sekunde7/ 60);
var sati7 = Math.floor(minute7 / 60);
var dani7 = Math.floor(sati7 / 24);
sati7 %= 24;
minute7 %= 60;
sekunde7 %= 60;
$("#dani7Box").html(dani7);
$("#sati7Box").html('14-Zapruđe ' + sati7 + ':');
$("#minute7Box").html(minute7 + ':');
$("#sekunde7Box").html(sekunde7);
timer7 = setTimeout(cdtd7, 1000);
}
$(document).ready(function() {
cdtd7();
});
var timer8;
function cdtd8() {
var sad8 = new Date();
var dolazak8 = new Date(sad8.getFullYear(),sad8.getMonth(),sad8.getDate(),18,00,00);
var timeDiff8 = dolazak8.getTime() - sad8.getTime();
if (timeDiff8 <= 0) {
clearInterval(timer8);
$("#Box8").remove();
}
var sekunde8 = Math.floor(timeDiff8 / 1000);
var minute8 = Math.floor(sekunde8 / 60);
var sati8 = Math.floor(minute8 / 60);
var dani8 = Math.floor(sati8 / 24);
sati8 %= 24;
minute8 %= 60;
sekunde8 %= 60;
$("#dani8Box").html(dani8);
$("#sati8Box").html('14-Zapruđe ' + sati8 + ':');
$("#minute8Box").html(minute8 + ':');
$("#sekunde8Box").html(sekunde8);
timer8 = setTimeout(cdtd8, 1000);
}
$(document).ready(function() {
cdtd8();
});
var timer9;
function cdtd9() {
var sad9 = new Date();
var dolazak9 = new Date(sad9.getFullYear(),sad9.getMonth(),sad9.getDate(),18,00,00);
var timeDiff9= dolazak9.getTime() - sad9.getTime();
if (timeDiff9 <= 0) {
clearInterval(timer9);
$("#Box9").remove();
}
var sekunde9 = Math.floor(timeDiff9/ 1000);
var minute9 = Math.floor(sekunde9/ 60);
var sati9= Math.floor(minute9 / 60);
var dani9= Math.floor(sati9/ 24);
sati9 %= 24;
minute9 %= 60;
sekunde9 %= 60;
$("#dani9Box").html(dani9);
$("#sati9Box").html('14-Zapruđe ' + sati9 + ':');
$("#minute9Box").html(minute9 + ':');
$("#sekunde9Box").html(sekunde9);
timer9 = setTimeout(cdtd9, 1000);
}
$(document).ready(function() {
cdtd9();
});
var timer10;
function cdtd10() {
var sad10 = new Date();
var dolazak10 = new Date(sad10.getFullYear(),sad10.getMonth(),sad10.getDate(),18,00,00);
var timeDiff10 = dolazak10.getTime() - sad10.getTime();
if (timeDiff10 <= 0) {
clearInterval(timer10);
$("#Box10").remove();
}
var sekunde10 = Math.floor(timeDiff10/ 1000);
var minute10 = Math.floor(sekunde10 / 60);
var sati10 = Math.floor(minute10 / 60);
var dani10 = Math.floor(sati10/ 24);
sati10 %= 24;
minute10 %= 60;
sekunde10 %= 60;
$("#dani10Box").html(dani10);
$("#sati10Box").html('14-Zapruđe ' + sati10 + ':');
$("#minute10Box").html(minute10 + ':');
$("#sekunde10Box").html(sekunde10);
timer10 = setTimeout(cdtd10, 1000);
}
$(document).ready(function() {
cdtd10();
});
var timer11;
function cdtd11() {
var sad11 = new Date();
var dolazak11 = new Date(sad11.getFullYear(),sad11.getMonth(),sad11.getDate(),18,00,00);
var timeDiff11 = dolazak11.getTime() - sad11.getTime();
if (timeDiff11 <= 0) {
clearInterval(timer11);
$("#Box11").remove();
}
var sekunde11 = Math.floor(timeDiff11 / 1000);
var minute11 = Math.floor(sekunde11 / 60);
var sati11 = Math.floor(minute11 / 60);
var dani11 = Math.floor(sati11 / 24);
sati11 %= 24;
minute11 %= 60;
sekunde11 %= 60;
$("#dani11Box").html(dani11);
$("#sati11Box").html('7-Dubrava ' + sati11 + ':');
$("#minute11Box").html(minute11 + ':');
$("#sekunde11Box").html(sekunde11);
timer11 = setTimeout(cdtd11, 1000);
}
$(document).ready(function() {
cdtd11();
});
var timer12;
function cdtd12() {
var sad12 = new Date();
var dolazak12 = new Date(sad12.getFullYear(),sad12.getMonth(),sad12.getDate(),18,00,00);
var timeDiff12 = dolazak12.getTime() - sad12.getTime();
if (timeDiff12 <= 0) {
clearInterval(timer12);
$("#Box12").remove();
}
var sekunde12 = Math.floor(timeDiff12 / 1000);
var minute12 = Math.floor(sekunde12 / 60);
var sati12 = Math.floor(minute12 / 60);
var dani12 = Math.floor(sati12 / 24);
sati12 %= 24;
minute12 %= 60;
sekunde12 %= 60;
$("#dani12Box").html(dani12);
$("#sati12Box").html('7-Dubrava ' + sati12 + ':');
$("#minute12Box").html(minute12 + ':');
$("#sekunde12Box").html(sekunde12);
timer12 = setTimeout(cdtd12, 1000);
}
$(document).ready(function() {
cdtd12();
});
var timer13;
function cdtd13() {
var sad13 = new Date();
var dolazak13 = new Date(sad13.getFullYear(),sad13.getMonth(),sad13.getDate(),18,00,00);
var timeDiff13 = dolazak13.getTime() - sad13.getTime();
if (timeDiff13 <= 0) {
clearInterval(timer13);
$("#Box13").remove();
}
var sekunde13 = Math.floor(timeDiff13 / 1000);
var minute13 = Math.floor(sekunde13 / 60);
var sati13 = Math.floor(minute13 / 60);
var dani13 = Math.floor(sati13 / 24);
sati13 %= 24;
minute13 %= 60;
sekunde13 %= 60;
$("#dani13Box").html(dani13);
$("#sati13Box").html('7-Dubrava ' + sati13 + ':');
$("#minute13Box").html(minute13 + ':');
$("#sekunde13Box").html(sekunde13);
timer13 = setTimeout(cdtd13, 1000);
}
$(document).ready(function() {
cdtd13();
});
var timer14;
function cdtd14() {
var sad14 = new Date();
var dolazak14 = new Date(sad14.getFullYear(),sad14.getMonth(),sad14.getDate(),18,00,00);
var timeDiff14 = dolazak14.getTime() - sad14.getTime();
if (timeDiff14 <= 0) {
clearInterval(timer14);
$("#Box14").remove();
}
var sekunde14 = Math.floor(timeDiff14 / 1000);
var minute14 = Math.floor(sekunde14 / 60);
var sati14 = Math.floor(minute14 / 60);
var dani14 = Math.floor(sati14 / 24);
sati14 %= 24;
minute14 %= 60;
sekunde14 %= 60;
$("#dani14Box").html(dani14);
$("#sati14Box").html('7-Dubrava ' + sati14 + ':');
$("#minute14Box").html(minute14 + ':');
$("#sekunde14Box").html(sekunde14);
timer14 = setTimeout(cdtd14, 1000);
}
$(document).ready(function() {
cdtd14();
});
var timer15;
function cdtd15() {
var sad15 = new Date();
var dolazak15 = new Date(sad15.getFullYear(),sad15.getMonth(),sad15.getDate(),18,00,00);
var timeDiff15 = dolazak15.getTime() - sad15.getTime();
if (timeDiff15 <= 0) {
clearInterval(timer15);
$("#Box15").remove();
}
var sekunde15 = Math.floor(timeDiff15 / 1000);
var minute15 = Math.floor(sekunde15 / 60);
var sati15 = Math.floor(minute15 / 60);
var dani15 = Math.floor(sati15 / 24);
sati15 %= 24;
minute15 %= 60;
sekunde15 %= 60;
$("#dani15Box").html(dani15);
$("#sati15Box").html('7-Dubrava ' + sati15 + ':');
$("#minute15Box").html(minute15 + ':');
$("#sekunde15Box").html(sekunde15);
timer15 = setTimeout(cdtd15, 1000);
}
$(document).ready(function() {
cdtd15();
});
var timer16;
function cdtd16() {
var sad16 = new Date();
var dolazak16 = new Date(sad16.getFullYear(),sad16.getMonth(),sad16.getDate(),18,00,00);
var timeDiff16 = dolazak16.getTime() - sad16.getTime();
if (timeDiff16 <= 0) {
clearInterval(timer16);
$("#Box16").remove();
}
var sekunde16 = Math.floor(timeDiff16 / 1000);
var minute16 = Math.floor(sekunde16 / 60);
var sati16 = Math.floor(minute16 / 60);
var dani16 = Math.floor(sati16 / 24);
sati16 %= 24;
minute16 %= 60;
sekunde16 %= 60;
$("#dani16Box").html(dani16);
$("#sati16Box").html('7-Dubrava ' + sati16 + ':');
$("#minute16Box").html(minute16 + ':');
$("#sekunde16Box").html(sekunde16);
timer16 = setTimeout(cdtd16, 1000);
}
$(document).ready(function() {
cdtd16();
});
var timer17;
function cdtd17() {
var sad17 = new Date();
var dolazak17 = new Date(sad17.getFullYear(),sad17.getMonth(),sad17.getDate(),18,00,00);
var timeDiff17 = dolazak17.getTime() - sad17.getTime();
if (timeDiff17 <= 0) {
clearInterval(timer17);
$("#Box17").remove();
}
var sekunde17 = Math.floor(timeDiff17 / 1000);
var minute17 = Math.floor(sekunde17 / 60);
var sati17 = Math.floor(minute17 / 60);
var dani17 = Math.floor(sati17 / 24);
sati17 %= 24;
minute17 %= 60;
sekunde17 %= 60;
$("#dani17Box").html(dani17);
$("#sati17Box").html('7-Dubrava ' + sati17 + ':');
$("#minute17Box").html(minute17 + ':');
$("#sekunde17Box").html(sekunde17);
timer17 = setTimeout(cdtd17, 1000);
}
$(document).ready(function() {
cdtd17();
});
var timer18;
function cdtd18() {
var sad18 = new Date();
var dolazak18 = new Date(sad18.getFullYear(),sad18.getMonth(),sad18.getDate(),18,00,00);
var timeDiff18 = dolazak18.getTime() - sad18.getTime();
if (timeDiff18 <= 0) {
clearInterval(timer18);
$("#Box18").remove();
}
var sekunde18 = Math.floor(timeDiff18 / 1000);
var minute18 = Math.floor(sekunde18 / 60);
var sati18 = Math.floor(minute18 / 60);
var dani18 = Math.floor(sati18 / 24);
sati18 %= 24;
minute18 %= 60;
sekunde18 %= 60;
$("#dani18Box").html(dani18);
$("#sati18Box").html('7-Dubrava ' + sati18 + ':');
$("#minute18Box").html(minute18 + ':');
$("#sekunde18Box").html(sekunde18);
timer18 = setTimeout(cdtd18, 1000);
}
$(document).ready(function() {
cdtd18();
});
var timer19;
function cdtd19() {
var sad19 = new Date();
var dolazak19 = new Date(sad19.getFullYear(),sad19.getMonth(),sad19.getDate(),18,00,00);
var timeDiff19 = dolazak19.getTime() - sad19.getTime();
if (timeDiff19 <= 0) {
clearInterval(timer19);
$("#Box19").remove();
}
var sekunde19 = Math.floor(timeDiff19 / 1000);
var minute19 = Math.floor(sekunde19 / 60);
var sati19 = Math.floor(minute19 / 60);
var dani19 = Math.floor(sati19 / 24);
sati19 %= 24;
minute19 %= 60;
sekunde19 %= 60;
$("#dani19Box").html(dani19);
$("#sati19Box").html('7-Dubrava ' + sati19 + ':');
$("#minute19Box").html(minute19 + ':');
$("#sekunde19Box").html(sekunde19);
timer19 = setTimeout(cdtd19, 1000);
}
$(document).ready(function() {
cdtd19();
});
//}
</script>
<center>
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:2px;"> </h1>
<div id="Box1">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati1Box"></div>
<div id="minute1Box"></div>
<div id="sekunde1Box"></div>
</div>
<div id="Box2">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati2Box"></div>
<div id="minute2Box"></div>
<div id="sekunde2Box"></div>
</div>
<div id="Box3">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati3Box"></div>
<div id="minute3Box"></div>
<div id="sekunde3Box"></div>
</div>
<div id="Box4">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati4Box"></div>
<div id="minute4Box"></div>
<div id="sekunde4Box"></div>
</div>
<div id="Box5">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati5Box"></div>
<div id="minute5Box"></div>
<div id="sekunde5Box"></div>
</div>
<div id="Box6">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati6Box"></div>
<div id="minute6Box"></div>
<div id="sekunde6Box"></div>
</div>
<div id="Box7">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati7Box"></div>
<div id="minute7Box"></div>
<div id="sekunde7Box"></div>
</div>
<div id="Box8">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati8Box"></div>
<div id="minute8Box"></div>
<div id="sekunde8Box"></div>
</div>
<div id="Box9">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati9Box"></div>
<div id="minute9Box"></div>
<div id="sekunde9Box"></div>
</div>
<div id="Box10">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati10Box"></div>
<div id="minute10Box"></div>
<div id="sekunde10Box"></div>
</div>
<div id="Box11">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati11Box"></div>
<div id="minute11Box"></div>
<div id="sekunde11Box"></div>
</div>
<div id="Box12">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati12Box"></div>
<div id="minute12Box"></div>
<div id="sekunde12Box"></div>
</div>
<div id="Box13">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati13Box"></div>
<div id="minute13Box"></div>
<div id="sekunde13Box"></div>
</div>
<div id="Box14">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati14Box"></div>
<div id="minute14Box"></div>
<div id="sekunde14Box"></div>
</div>
<div id="Box15">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati15Box"></div>
<div id="minute15Box"></div>
<div id="sekunde15Box"></div>
</div>
<div id="Box16">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati16Box"></div>
<div id="minute16Box"></div>
<div id="sekunde16Box"></div>
</div>
<div id="Box17">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati17Box"></div>
<div id="minute17Box"></div>
<div id="sekunde17Box"></div>
</div>
<div id="Box18">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati18Box"></div>
<div id="minute18Box"></div>
<div id="sekunde18Box"></div>
</div>
<div id="Box19">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="sati19Box"></div>
<div id="minute19Box"></div>
<div id="sekunde19Box"></div>
</div>
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:2px;"> </h1>
</center>
</div>
</body>
</html>
                                                                                                     Thanks                                                                                                                              

Not sure if I understand what you need to do, but you can always watch the number of DIVs on page with
var divCount = document.getElementsByTagName('div').length;

you can either set display:none on the divs you don't want to display, or in jQuery $('#element').hide();