Javascript and PHP countdown timer that displays the same thing for everyone

Question

I have a script needed to create a countdown timer with a start and resume button. What I'm trying to do are the Start, Stop and reset buttons on one page, which control the timer on another page. Therefore, if user X visits page.html, he will see a timer that is 0. Admin X visits admin.html, where they see a timer at 0, but they also have start, stop and reset buttons. When the administrator clicks the button, the timer on the .html page starts the countdown. If another user visits the page during the timer, they will see where the timer is. If anyone has any code ideas, other answers on this site that I can link to, or code that I need, I would be very grateful.

--- The real scenario. We have people on skype who make the show, and they need to know when it's time to relax. The idea is that the manufacturer can press a button that starts the countdown timer to let them know that they have 60 seconds before the break. The reason I want to do this on a web page is because there are other things on the page that the skype person pays attention to. So I wanted something that they could not miss. I have access to sql server and can do both php and javascript. I suppose that I will need to make some combination of the two.

UPDATE Thank you all for your help.

I am updating this because I realized that I am probably making things more complex than they should be at this point. A break occurs every 30 minutes, and all shows either start at the top of the hour, or after 30 minutes. I finally understood the perfect script. Although this may be turned off a bit due to the normal drift of the clock, it should actually display the same no matter who enters the page.

<script> function addZero(i) { if (i<10) { i="0" + i; } return i; } setInterval(function() { function addZero(i) { if (i<10) { i="0" + i; } return i; } var d = new Date(); var s =(d.getSeconds()); var m =(d.getMinutes()); var x = document.getElementById("timer"); var c = addZero(30 - m) + ":" + addZero(60 - s); var d = addZero(60 - m) + ":" + addZero(60 - s); if (m < 30) { t = c } else { t = d } x.innerHTML = t; }, 250) </script> <div align="center"> <table><tbody> <tr><td style="font-size:34px;" id="timer"></td> <td nowrap="nowrap" width="15px"><p style="text-align: left;"></p></td> <td style="font-size:24px;">Minutes till Station Break.</td></tr> </tbody></table> </div> 

Answer 1

I finally came up with a solution that works. There are still elements that I did not quite understand how to fix, but the following code essentially does exactly what I need now.

 setInterval(function() { function addZero(i) { if (i < 10) { i = "0" + i; } return i; } var x = document.getElementById("timer"); var d = new Date(); var s = (d.getSeconds()); var m = (d.getMinutes()); var a = addZero(30 - m); var b = addZero(60 - m); var c = (60 - s); var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>"; var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>"; if (m > 30) { y = b; } else if (m < 30) { y = a; } if (y < 2 && c < 15) { q = z; } else { q = v; } var t = y + (":" + addZero(c) + " Till Station " + (q)); x.innerHTML = t; }, 250); <div align="center" id="timer" style='color:black;font-size:24px;' ></div> 

Answer 2

It looks like you will need a COMET / Push solution that allows you to track active clients and push new data on them. I'm not sure if PHP is the best solution for this, as there are other programming languages ​​that handle this more elegantly.

See: Using comet with PHP?

Others may disagree, but Node.js is a great and appropriate solution for this particular problem. Combine Node.js with Socket.io , and you have the basic tools to implement exactly what you are describing.

In short, the client application will send an AJAX request to the server. Then the server will hold the request until it has something to return (in your case, the timer is running, the timer is ticked, the timer is paused, etc.). As soon as the data is returned, another request will be made and held by the server, thereby repeating this process. If your server and client support WebSockets , then you can hold AJAX connections in favor of a WebSocket connection (TCP over HTTP).

Since not everyone uses the latest version of Chrome / Firefox, you may have to support several push methods in order to be browser compatible. Socket.io reviews the communication layer (Comet - long-term survey, WebSockets, Adobe Flash Socket, multi-user streaming Ajax, Forever Iframe, JSONP Polling) and selects the best technology based on the capabilities of the client browser.

Alternative

You can also use the javascript interval to periodically poll the server (via AJAX) to see if a timer is set. However, you can load the server with requests, as each client will constantly poll the server to determine if the 60-second timer has started.

Answer 3

When the administrator starts the timer, the server saves start_time and the duration timer (60 seconds) (in db, file, or something else). When the user visits page.html, start_time and duration received from the server, computes finish_time (or finish_time computes when saved). Then finish_time - current_time is the difference, which is the current state of the timer.

 $start_time = strtotime( '2012-09-19 00:30:05' ); $duration = 300; //300 seconds = 5 minutes (60 * 5) $finish_time = $start_time + $duration; $timer_state = $finish_time - time(); 

$timer_state is passed in javascript and the countdown to zero.

Answer 4

And here is the final solution that I am currently using ... Below is a file called timer.js

 setInterval(function() { function addZero(i) { if (i < 10) { i = "0" + i; } return i; } var d = new Date(); var s = (d.getSeconds()); var m = (d.getMinutes()); var x = document.getElementById("timer") var a = (29 - m); var b = (59 - m); var f = (60 - s); if (m < 30) { e = addZero(a); } else { e = addZero(b); } var c = " Minutes Till Station "; var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>"; var v = "<span style='color:white;font-size:24px;'>" + "Break" + "</span>"; if (e < 1 && f < 30) { t = (e) + ":" + addZero(f) + (c) + (z); } else { t = (e) + ":" + addZero(f) + (c) + (v); } x.innerHTML = (t); }, 250); 

Then I used this on the page to display the final result.

 <script language="javascript" src="timer.js"></script> <div id="timer" style='margin-top:150;float:center;color:white;font-size:24px;'></div>