Objective: A countdown timer that countdown to a certain time that is synchronized to server time. This means that does not matter where the client is from all clients will see the same exact count down. The countdown will also implement a button that when ever pressed will reset the countdown to 15 seconds regardless of which client pressed it. Once again all clients will see the same exact 15 seconds countdown.
Accomplished: So far I'm able to get the countdown to be synchronized to my server time. The timer actually counts to a set time according to the server time and date no matter who is looking at it.
PROBLEM: I'm unable to get the button to reset the countdown timer to 15 seconds regardless of who clicked it. Every time the same button is click the timer must reset to 15 seconds for everyone looking at it.
Code:
<html>
<head>
<title></title>
<script type="text/javascript">
var month = '0'; // '*' for next month, '0' for this month or 1 through 12 for the month
var day = '13'; // Offset for day of month day or + day
var hour = 21; // 0 through 23 for the hours of the day
var tz = -5; // Offset for your timezone in hours from UTC
var lab = 'tzcd'; // The id of the page entry where the timezone countdown is to show
function start() {
displayTZCountDown(setTZCountDown(month,day,hour,tz),lab);
}
window.onload = start;
function setTZCountDown(month,day,hour,tz) {
var toDate = new Date();
if (month == '*') {
toDate.setMonth(toDate.getMonth() + 1);
} else if (month > 0) {
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
toDate.setMonth(month-1);
}
if (day.substr(0,1) == '+') {
var day1 = parseInt(day.substr(1));
toDate.setDate(toDate.getDate()+day1);
} else {
toDate.setDate(day);
}
toDate.setHours(hour);
toDate.setMinutes(0-(tz*60));
toDate.setSeconds(0);
var currenttime = '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL"-->'
var fromDate = new Date(currenttime);
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function setTimerto() {
// I NEED HELP IN HERE. I WANT THIS FUNCTION TO SET
// THE REAL TIME COUNDOWN TO 15 SECONDS ONCE THE BUTTON
// IS CLICKED REGARDLESS OF WHAT THE COUNTDOWN WAS AT
// WHEN THE BUTTON WAS CLICKED. THE COUNT DOWN NEEDS TO
// BE SYNCHRONIZED WITH SERVER TIME AS WELL.
}
function displayTZCountDown(countdown,tzcd)
{
if (countdown < 0) {
document.getElementById(tzcd).innerHTML = 'ENDED';
} else {
var secs = countdown % 60;
if (secs < 10) {
secs = '0'+secs;
}
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60;
if (mins < 10) {
mins = '0'+mins;
}
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
if (hours == 0 && mins == 0 && secs < 15) {
document.getElementById(tzcd).innerHTML ='<font color="red">' +hours+ ':' +mins+ ':' +secs+ '</font><br /><input type="button" value="CLICK" onclick="setTimerto()">';
} else {
document.getElementById(tzcd).innerHTML = hours+ ':' +mins+ ':' +secs+ '<br /><input type="button" value="CLICK" onclick="setTimerto()">';
}
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}
</script>
</head>
<body>
<span id="tzcd" style="font-weight: bold; font-size: 30px;"></span>
</body>
</html>
ObjectiveThe countdown will also implement a button that when ever pressed will reset the countdown to 15 seconds regardless of which client pressed it. Once again all clients will see the same exact 15 seconds countdown.
This is what I don't understand. I am client. I open your document. It shows be a countdown starting from, let's say 60 seconds, as this is the time loaded first time from the server. But now another user presses his button and changes the countdown to 15 seconds. Does it means that my countdown should also then change suddenly to 15 seconds? And when another client presses his button, my counter jumps again to 15 seconds? Looks like a mess to me...
Objective: I'm unable to get the button to reset the countdown timer to 15 seconds regardless of who clicked it. Every time the same button is click the timer must reset to 15 seconds for everyone looking at it.
There is no "it", everyone is looking at a different timer running in their own browser. The only way to (as far as possible) synchronise or re-synchronise the timers running on multiple browsers, is for the server to log the target expiry time, and for each browser to poll the server periodically to check whether the expiry time has been re-set. If so then the new duration is determined by comparing the current server time with the expiry time in the log file.
The act of resetting the expiry time by any browser, would involve making a request to the server to update the log file, then all browsers could calculate the new duration the next time they poll the server.
Accuracy could not be perfect and would be proportional to the polling frequency.
As long as your server can cope with the expected load, there should be no problem.
I'm almost tempted to try it as an amusing exercise.
This is what I don't understand. I am client. I open your document. It shows be a countdown starting from, let's say 60 seconds, as this is the time loaded first time from the server. But now another user presses his button and changes the countdown to 15 seconds. Does it means that my countdown should also then change suddenly to 15 seconds? And when another client presses his button, my counter jumps again to 15 seconds? Looks like a mess to me...
Yes, the idea is to have every client see the same thing. That is why the timer is synchronized with server time and not the client's time. It is a challenging situation, but there must be a way.
There is no "it", everyone is looking at a different timer running in their own browser. The only way to (as far as possible) synchronise or re-synchronise the timers running on multiple browsers, is for the server to log the target expiry time, and for each browser to poll the server periodically to check whether the expiry time has been re-set. If so then the new duration is determined by comparing the current server time with the expiry time in the log file.
The act of resetting the expiry time by any browser, would involve making a request to the server to update the log file, then all browsers could calculate the new duration the next time they poll the server.
Accuracy could not be perfect and would be proportional to the polling frequency.
As long as your server can cope with the expected load, there should be no problem.
I'm almost tempted to try it as an amusing exercise.
Please try and let me know the results! I'm pulling my hairs out with no returns. It would be greatly appreciated if you could share your results with me as well. Thank you so much ahead of time.
Please try and let me know the results! I'm pulling my hairs out with no returns. It would be greatly appreciated if you could share your results with me as well. Thank you so much ahead of time.
Well the theory seems to have held up quite well, although it's never going be perfect: Demo.
Well the theory seems to have held up quite well, although it's never going be perfect: Demo.
Thank you so much clueful! Everything seems to have held up very well except for one problem. When I ran the script on different browsers and click the button on one browser the other browser did not start the countdown as well. If I then click the button on the second browser the countdown works and synchronize to the 1st browser's countdown. Is there a way to get both browser to start counting down as soon as one button is clicked regardless of who did the clicking?
That's the way it works for me no matter what combination of browsers are used, so I'm not sure what to think.
Hello Clueful, thanks for the really good Demo that can explain me how to get that kind of timer, could you please, also, post the .php file that i can see which variables are in, how you developed it and which query did you made?
I understood that you are having a query that update and log the end date and the actual date, but that what else?
Reply With Quote
Originally Posted by tannhutha
Bookmarks