How To add multiple Countdown timer query in a same html page? - javascript

I want to create a online auction site. I need to mention every auction ending time & date.
For this I have created a countdown.js file like this:
// set the date we're counting down to
var target_date = new Date("Aug 15, 2014").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S";
}, 1000);
And I have imported this in my html as follows:
<script type="text/javascript"src="js/countdown.js"></script>
<p style="font-size:larger;color:Red;font-weight:bolder">END IN</p>
<h5><i id="countdown"></i></h5><br />
It's working fine. Now I want to add one or more timer in the same page. While I use this code
<h5><i id="countdown"></i></h5><br />
It's showing an error in ID. How to rectify this?

Just move your code into one function which is accepting 2 params elementId and target date
function setTimer(elem_id, date) {
// set the date we're counting down to
var target_date = new Date(date).getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countDownElem = document.getElementById(elem_id);
//update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countDownElem.innerHTML = days + " D : " + hours + " H : " + minutes + " M : " + seconds + " S";
}, 1000);
}
setTimer("countdown1","Aug 15, 2014");
setTimer("countdown2","Aug 17, 2014");
Here is the fiddle for above code

The answer above works, but I noticed the second timer is showing to be an hour longer away than the first timer.

Related

Countdown reset on specific time

Currently I have a script, which has a countdown for a specific date, but I want the countdown to be specific on a timer, so let's say if I start the timer and I have set the timer to run for 30 days, it will then run for 30 days and then reset back to 30 days again and start running. Is it possible to change it to do so?
My code:
<body>
<span id="countdown"></span>
<script LANGUAGE="Javascript">
// set the date we're counting down to
var target_date = new Date("Apr 9, 2015").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
</script>
</body>
EDIT:
I have now changed the code to look like underneath, but now when I open the website in my browser its blank.
New code:
<span id="countdown"></span>
<script LANGUAGE="Javascript">
// set the date we're counting down to
var target_date = new Date("Apr 9, 2015").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
if (seconds_left <= 0){
target_date = target_date + 30 days;
}
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
I really advice you to take advantage of JavaScript libraries , in your case moment JS is the perfect solution, you can check their documentation and see how you can manage time easily. Anyways here is the solution of your question using moment js.
First download moment js and add it to your page.
HTML CODE
<span id="days"> </span>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
It can not get simple than that :)
JAVASCRIPT
//create two variables for holding the date for 30 back from now using substract
var back30Days = moment().subtract(30, 'days').format('YYYY-MM-DD H:mm:ss');
var countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
//variables holding days, hours , minutes and seconds
var Days, Minutes, Hours, Seconds;
// Set Interval function for performing all calculations and decrementing the countDownSeconds
setInterval(function () {
// Updating Days
Days = pad(Math.floor(countDownSeconds / 86400), 2);
// Updating Hours
Hours = pad(Math.floor((countDownSeconds - (Days * 86400)) / 3600), 2);
// Updating Minutes
Minutes = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600)) / 60), 2);
// Updating Seconds
Seconds = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600) - (Minutes * 60))), 2);
// Updation our HTML view
document.getElementById("days").innerHTML = Days + ' Days';
document.getElementById("hours").innerHTML = Hours + ' Hours';
document.getElementById("minutes").innerHTML = Minutes + ' Minutes';
document.getElementById("seconds").innerHTML = Seconds + ' Seconds';
// Decrement the countDownSeconds
countDownSeconds--;
// If we reach zero , our chrono should reset to 30 days back again, as you told
if (countDownSeconds === 0) {
countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
}
}, 1000);
// Function for padding the seconds i.e limit it only to 2 digits
function pad(num, size) {
var s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
Here is a jsfiddle

Javascript countdown won't work

I am trying to make a Javascript countdown for my website, so as a start I wanted to test the best solution. I now have a code, but when I open the website nothing is on there, I think I might have done something wrong when trying to implement Javascript into html?
My code:
<!DOCTYPE html>
<html>
<head>
<title>Home Test Countdown</title>
<script LANGUAGE="Javascript">
var target_date = new Date("Aug 15, 2019").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
</script>
</head>
<body>
<span id="countdown"></span>
</body>
</html>
Since you have the script in the head, when var countdown = document.getElementById("countdown"); is executed the element is not present in the dom so countdown will be null which will result in the error Uncaught TypeError: Cannot set property 'innerHTML' of null in line countdown.innerHTML = '...'.
One possible solution is to move your code to a window load event handler
window.addEventListener('load', function () {
var target_date = new Date("Aug 15, 2019").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
}, 1000);
})
Demo: Fiddle
Another is to move your script to the bottom of the page after <span id="countdown"></span>
This code is working you need to add your code after your HTML elements(Add the javascript code before closing the body tag)
or try to add your code in window.onload like,
window.onload = function(){
// your timer code goes here
};
var target_date = new Date("Aug 15, 2019").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function() {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
}, 1000);
<span id="countdown"></span>
Also you added the tag jquery so you can add your code in $.ready() like,
$(function(){
// your code here
});
The script needs to be after the span countdown object

Looping foreach, grabbing data from db and insert into JS

I have some JS that display a countdown timer, but this is only showing for one item on the page and i need it to be used in the PHP foreach loop I have. this code below is within the foreach loop.
<div class="countdown-timer">
<strong>Time Left - </strong> <span id="countdown"></span>
</div>
<script type="text/javascript" charset="utf-8">
// set the date we're counting down to
var target_date = new Date("<?php echo $listing->ends; ?>").getTime(); // echo would return 2014-07-15
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + " days " + hours + " hrs "
+ minutes + " min " + seconds + " secs ";
}, 1000);
</script>
You'll need to create a unique ID for each element, that way you can reference each element individually.
In addition, you'd be wise to take the javascript block out of the php foreach loop. Instead, create an array of each element's ID, then use that array to setInterval on each item via javascript. That way, you don't repeat a bunch of JS code.
Rough example:
<!-- php code here to loop and create these html elements -->
<div class="countdown-timer">
<strong> Time Left - </strong> <span id="countdown-INSERT_ID_FROM_PHP_HERE"></span>
</div>
<!--end php code to create html -->
<script type="text/javascript">
var createCountdown = function(id, date) {
var target_date = new Date(date).getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById(id);
setInterval(function() {
var current_date = new Date().getTIme();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + " days " + hours + " hrs "
+ minutes + " min " + seconds + " secs ";
}, 1000);
};
// USE PHP TO MAKE THIS ARRAY
// POPULATE IT WITH OBJECTS THAT LOOK LIKE THIS
// { id: "countdown-6", date: "2014-07-01" }
var allCounters = [
{ id: "countdown-6", date: "2014-07-01" }
];
allCounters.forEach(function(counter) {
createCountdown(counter.id, counter.date);
});
</script>

Javascript Countdown Timer Error

I am not able to know the reason, why my countdown timer is not working. Here is my code and jsfiddle link :http://jsfiddle.net/CHC8w/
<div id="idays"></div>
<div id="ihours"></div>
<div id="iminutes"></div>
<div id="iseconds"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
setInterval(function(){
var future = new Date('Mar 28 2014 11:35:14');
var now = new Date('Mar 28 2014 11:05:14');
//var future = new Date("Sep 20 2014 21:15:00 GMT+0200");
//var now = new Date();
var difference = Math.floor((future - now) / 1000);
var seconds = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var minutes = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var hours = fixIntegers(difference % 24);
difference = Math.floor(difference / 24);
var days = difference;
jQuery("#iseconds").text(seconds + " sec");
jQuery("#iminutes").text(minutes + " min");
jQuery("#ihours").text(hours + " hr");
jQuery("#idays").text(days + " days");
}, 1000);
});
function fixIntegers(integer)
{
if (integer < 0)
integer = 0;
if (integer < 10)
return "0" + integer;
return "" + integer;
}
</script>
Kindly help.
Thanks
var now has fixed datetime value var now = new Date('Mar 28 2014 11:05:14'); during each call to setInterval()
Check this too http://jsfiddle.net/CHC8w/1/
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "Days </br> " + hours + "hr</br>"
+ minutes + "min</br>" + seconds + "sec</br>";
}, 1000);
Source : https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer.

Why does getElementsByClassName return undefined?

I am making a basic counter that counts down the days, hours, mins, and seconds until a date. I was able to find a tutorial on how to go about making this part. I keep getting an error at line 48 where I type elements[i].innerHTML. It is saying elements is undefined at that point in time. I did some troubleshooting and found elements becomes undefined after the switch statement. Why is this?
<html>
<a class="test" name="Christmas"></a>
<a class="test" name="New Year"></a>
<a class="test" name="Halloween"></a>
<script>
// javascript
var elements = document.getElementsByClassName("test");
var text = '';
var target_date = new Date().getTime();
for(var i=0; i<elements.length; i++) {
document.write(elements[i]);
switch(elements[i].name){
case "Christmas":
target_date = new Date("Dec 25, 2014").getTime();
text = "Time until Christmas: ";
break;
case "New Year":
target_date = new Date("Jan 1, 2015").getTime();
text= "Time until the New Year: ";
break;
case "Halloween":
target_date = new Date("Oct 31, 2014").getTime();
text = "Time until Halloween: ";
break;
}
// variables for time units
var days, hours, minutes, seconds;
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
elements[i].innerHTML = text + days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
}
</script>
</html>
I would like to continue using a switch and for loop to accomplish this task in case I choose to add more dates.
The setInterval executes after the function is run, by which point i has incremented to 4. You should create a closure over the element to preserve it
setInterval(runnable(elements[i], text, target_date), 1000);
// also pass target_date since it is needed
function runnable(el, text, target_date) {
return function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
el.innerHTML = text + days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
}
}
Demo: http://jsfiddle.net/87zbG/1/
var elements = document.getElementsByClassName("test");
var ele = '';
var target_date = new Date().getTime();
for (i = 0; i < elements.length; i++) {
switch (elements[i].name) {
case "Christmas":
target_date = new Date("Dec 25, 2014").getTime();
text = "Time until Christmas: ";
break;
case "New Year":
target_date = new Date("Jan 1, 2015").getTime();
text = "Time until the New Year: ";
break;
case "Halloween":
target_date = new Date("Oct 31, 2014").getTime();
text = "Time until Halloween: ";
break;
}
// variables for time units
var days, hours, minutes, seconds;
//make a reference to element here
ele = elements[i];
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
ele.innerHTML = text + days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
}, 1000);
}
http://jsfiddle.net/Mte5w/
I guess there is issue of scope. Try removing 'var' keyword from the declaration of 'elements' variable. It will make the element global. It should work.

Categories