Develop Reference

Countdown timer javascript

How do i make countdown timer that will be the same for everyone regardless their time on pc.
The script doesn't work as i wanted it to, basically anyone can change the timer with just changing date and time on their pc.
var end = new Date('07/31/2015 4:10 pm');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('giveaway1').innerHTML = 'The Winner Has Been Chosen!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('giveaway1').innerHTML = days + 'days ';
document.getElementById('giveaway1').innerHTML += hours + 'hrs ';
document.getElementById('giveaway1').innerHTML += minutes + 'mins ';
document.getElementById('giveaway1').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);

Since local PC time is outside your control, you will have to get the reliable time from your server (or a third-party server) at least once.
Once you know what the (correct) server time is, you can subtract server time from local PC time to get the 'offset' (i.e. the difference between server time and local PC time).
Once you have that offset you can then at any time get the local PC time - via new Date() - and factor in the offset to get the 'correct' server time, without having to call the server each time.

Countdown keeps changing

Right, basically I have a countdown timer that doesn't do exactly what it says on the tin.
The PHP outputs correctly, but once it's echo'd within the Javascript, the date constantly changes.
I will load the page, and it will show one ETA, and I'll refresh and it could jump forward an hour or jump back several hours?
I just need the timer to countdown to the 20th March 2015.
The PHP Code
<?php
$futureDate = '2015-03-20';
$d = new DateTime($futureDate);
?>
The Javascript
$('#counter').countdown({
timestamp : (new Date()).getTime() + <?php echo $d->diff(new DateTime())->format('%a*%h*%i*%s*1000'); ?>
});
Here's a Live Preview
Preview
Please, somebody help lol

you can use something like this in javascript
how to countdown to a date
var end = new Date('03/20/2015 0:0 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('counter').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('counter').innerHTML = days + 'days ';
document.getElementById('counter').innerHTML += hours + 'hrs ';
document.getElementById('counter').innerHTML += minutes + 'mins ';
document.getElementById('counter').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);

Replace your javascript with
$('#counter').countdown({
timestamp : new Date('2015/03/20')
});
As it is now you're overcomplicating things - you just need to set the date of the countdown to when you want it to finish.

Php mysql javascript game with count down timer

I am making a game with php mysql and jquery which involves finding out 5 differences in two images within 30 seconds. Everything works fine but some users are able to submit scores(time taken to find all 5 differences) like 0.008 seconds which is next to impossible even if you play the same image multiple times and touch the screen with all 5 fingers.
Any idea how this could be possible? Just theory wise. Below is the count down timer code.
var end = new Date();
var temp = new Date();
end.setSeconds(temp.getSeconds()+30);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var milliseconds = Math.floor(distance % _second);
var countdownElement = document.getElementById('elapsed_time');
//countdownElement.innerHTML = seconds + ':' + milliseconds;
seconds=seconds+1;
//countdownElement.innerHTML = '00:' + seconds.toString();
var strmil = milliseconds.toString();
if(strmil.length==3){
strmil=strmil.substring(0, strmil.length - 1);
}
countdownElement.innerHTML = seconds + ':' + strmil;
if( seconds==0){
// handle expiry here..
clearInterval( timer ); // stop the timer from continuing ..
countdownElement.innerHTML = '00:00';
setTimeout(function(){
window.location='go to a page which shows the you timed out';
}, 1000);
}
}
if( $('#elapsed_time').length ){
timer = setInterval(showRemaining, 10);
}

Gathered from information the comments you gave me I think the problem is located where you perform your checks. The following probably happens in the application when this error occurs.
When the game starts it starts the timer.
The application then constantly checks if the differences have been found yet
An error occurs here and the application instantly receives that all the differences have been found.
The game stops the timer and shows the victory popup with around 0.001-0.008 seconds.
This entire process takes around 0.001-0.008 seconds which explains the score.
So you should probably check for the bug in the part where it checks the differences. The code you posted works fine and the bug is not found there.
Keep browser compatibility issues in mind, maybe the bug only occurs on certain browsers.

Server time instead of client time JAVASCRIPT

Is it possible to use this script with server time instead of client time. (For checking if time is past) It now uses client time and thats a problem. (Maybe with php??)
<script>
var end = new Date('02/19/2012 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>

You can get time from ajax request, or use something like this:
<?php
$now = date('d-m-Y');
$end= "01-01-2013"
$date = strtotime($end) - strtotime($now);
$days = date('d', $date);
$monthes= date('m', $date);
$years= date('Y', $date);
?>
<script>
var days = "<?= $days ?>";
var monthes= "<?= $monthes?>";
var years= "<?= $years?>";
document.getElementById('countdown').innerHTML = days+ ' days';
document.getElementById('countdown').innerHTML += monthes+ ' monthes';
document.getElementById('countdown').innerHTML += years+ ' years';
</script>

Puku's answer will return a fixed date, instead of server time. He seems to have fixed it.
I propose:
<script>
var date = <? echo time(); ?>;
// etc...
</script>
This will fetch the amount of (server) seconds since the Unix epoch IIRC and stuff it in the variable 'date' as an int. Note everything between <? and ?> is PHP and thus executed on the server.
Note I didn't use abbreviated syntax, like puku. I don't have it by default and I can't change that, so I thought it'd be nice to use this notation for those with the same problem.

Found an example similar with Ajax at http://www.roseindia.net/ajax/ajax-first-example.shtml
[UPDATE] After comments stating my previous post this didn't work, i've reviewed everying and changed the JavaScript and PHP file (giving full code now). This code now works. I've tried to keep it as similar as possible to the original example and the link previously provided instead of optimizing things (I'll leave that to you).
<script>
var end = new Date('02/19/2014 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var distance;
function startShowRemaining(strnow) {
var now = new Date(strnow);
distance = end - now;
//To prevent 1 sec. lag, we make first a direct call to showRemaining
showRemaining();
//Then each second, we decrement count and show info
timer = setInterval(countRemaining, 1000);
}
function countRemaining() {
distance = distance - 1000; //we substract a second (1000 ms) with each call
showRemaining();
}
function showRemaining() {
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + ' days ';
document.getElementById('countdown').innerHTML += hours + ' hrs ';
document.getElementById('countdown').innerHTML += minutes + ' mins ';
document.getElementById('countdown').innerHTML += seconds + ' secs';
}
function postRequest(strURL) {
var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
startShowRemaining(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
postRequest('time.php');
</script>
<div id="countdown"></div>
And create file: time.php
<?php
print date("d/m/Y H:i:s");
?>
PHP file is called once to get current date, then the "distance" var is decremented each second to prevent further Ajax calls that uses bandwidth and... can take more than one second anyway. A different function for decrementing is used, so we can call showRemaining immediatly without decrementing it (You could also start increasing 1000 in the first call and use only one function..).
Anyway I prefer Puku approach to just use PHP to write the right value for the "now" var, it is simpler. This one is nice only as an example of Ajax use.

how to make a unique function for multiple codes of javascript

I have the following code and I am wondering how to put it all on one function and give the id's of the span a unique id. So that way I dont have to have multiple instances off the same code each time. Right now if I want to have 3 countdowns I have to add his code three times and change the span id to a unique ID if i don't it will only work onces. So basically I want to be able to turn the JavaScript into one function so that I can call it without having to copy and paste it multiple times and also be able to have more than one countdown on a page by giving the span its own unique(random) id.
<script>
function showRemaining() {
<?php echo "var end = new Date('". $row['expires'] ."');"; ?>
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
clearInterval( timer );
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
document.getElementById('countdown').innerHTML = 'Days: ' + days + ' ';
document.getElementById('countdown').innerHTML += 'Hours: ' + hours + ' ';
document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes + ' ';
document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds;
}
timer = setInterval(showRemaining, 1000);
</script>
<span id="countdown"></span>

Here's a few approaches I would recommend to make this function more reusable.
Pass the time of expiry as an argument, instead of hard-coding it to some database value that's printed by PHP code.
Break the implicit timer and UI (span) connection. Pass the element where this timer would be updated explicitly.
Manage the timer interval within the function itself. Right now it's spread between the function and global code (setInterval), which will make it difficult to reuse.
Here's the updated interface I propose for this function.
/*
#param expiryTime timestamp when this countdown will expire
#param elementToUpdate a reference to a DOM element that shows the timer
*/
function showRemainingTime(expiryTime, elementToUpdate)
Say if you have two spans with id's a and b which need to show this timer, then you would use this function as,
showRemainingTime(1325544453556, document.getElementById('a'));
showRemainingTime(1218290387102, document.getElementById('b'));