I have a future date from a datetime field in a mysql database, it will only ever be no more than an hour or two ahead of the current time.
What I need is it to display a countdown in real time on the page, eg "2 minutes 5 secs", that obv counts down every second.
Would I need javascript for this? Or is jquery etc the new thing?
I dont know either, only a little php.
As long as its realtime. You need javascript
Your back-end PHP should query the db and insert the future time into the JS.
An example of a JS countdown : GTA V's countdown here http://www.gtaforums.com/index.php?showforum=239
I think you already found the solution. But if someone is still looking for this solution, then this code might help.
Reverse timer from javascript:
var target_date = new Date('Aug 01 2014 20:47:00').getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById('timeremaining');
var countdownTimer = 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);
if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0 )
{
document.getElementById('timeremaining').innerHTML = '';
clearInterval(countdownTimer);
}
else
{
if(days>0)
{
days= days+'d,';
}
else
{
days='';
}
countdown.innerHTML ='( ' + days + checkTime(hours) + ':'+ checkTime(minutes) + ':' + checkTime(seconds) +' remaining)';
}
}, 1000);
function checkTime(i) {
if (i < 10) {i = '0' + i};
return i;
}
Related
I'm trying to make a count down timer that counts down to a couple different hours depending on the time of the day.
Here's how I've tried to set the function for the time. So if its before 14.00, it would count down to 14.00 and if it's after 14.00, it would count down to 20.00. After 20.00, it would show the count down to 14.00 tomorrow.
Ive tried to set the target time like this, but setting the date for "tomorrow at 14.00" I just cant get to work.
var target_date = new Date();
var currentdate = new Date();
if (currentdate.getHours() > 0 && currentdate.getHours() < 14) {
target_date.setHours(14,0,0,0);
}
else if (currentdate.getHours() > 14 && currentdate.getHours() < 20) {
target_date.setHours(20,0,0,0);
}
else {
target_date.setDate(currentdate.getDate()+1).setHours(16,0,0,0); // if 20-24, count down to tomorrow at 14.00
}
The rest of the script for the count down is
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 = hours + "t "
+ minutes + "m";
}, 1000)};
target_date.setDate(currentdate.getDate()+1).setHours(16,0,0,0);
setDate() method doesn't return Date object, so this sequence wouldn't work
You should write
target_date.setDate(currentdate.getDate()+1);
target_date.setHours(16,0,0,0);
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
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.
So, in my quest to load a countdown clock on my website, I found some code to display one. More than one example, actually. I selected one that I could understand, and have learned a couple more things along the way. This code works, but does not display numbers less than 10 with two digits (ie. I want 7 seconds to display as 07 seconds).
// set the date we're counting down to
var target_date = new Date("May 16, 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 + " DAYS " + hours + ":"
+ minutes + ":" + seconds + " UNTIL DRAWING";
}, 1000);
I tried setting the time variables as functions. So instead of above, I had:
seconds = function () {
parseInt (seconds_left % 60);
if (seconds_left % 60 < 10) {
return "0" + seconds_left; }
else return seconds_left % 60;
}
No dice though. Any tips on what else I might try would be appreciated.
Just adding a '0' to the beginning of a number if it is less than ten would work:
countdown.innerHTML = (days < 10 ? '0' : '') + days + " DAYS " +
(hours < 10 ? '0' : '') + hours + ":" +
(minutes < 10 ? '0' : '') + minutes + ":" +
(seconds < 10 ? '0' : '') + seconds + " UNTIL DRAWING";
Your code is just about fine, but you do need to use the "()" after seconds to call a function. Then there's the problem that seconds() is another function.
I renamed the function, moved it up into the interval function, and passed seconds in as a variable.
Here's a way to make it work:
//... your other code
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
var parseSeconds = function (seconds_left) {
parseInt (seconds_left % 60);
if (seconds_left % 60 < 10) {
return "0" + seconds_left; }
else return seconds_left % 60;
}
// format countdown string + set tag value
countdown.innerHTML = days + " DAYS " + hours + ":"
+ minutes + ":" + parseSeconds(seconds) + " UNTIL DRAWING";
}, 1000);
but a better way would be to use moment.js if you can. They have awesome easy formatting.
Here's the moment.js solution. Just replace all your code with this and import moment.js
setInterval(function () {
var countdown = document.getElementById("countdown");
countdown.innerHTML = moment().format('MMMM Do YYYY, h:mm:ss a');
}, 1000);
http://jsfiddle.net/7dxjK/
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.