Question

I have the script needed to generate a countdown timer that has a start and resume button. What I’m attempting to do is to have Start, stop, and reset buttons on one page that controls the timer on the other page.
So if user X visits page.html they will see a timer that is at 0.
Admin X visits admin.html where they see the timer at 0 but they also have a start, stop, and reset buttons. When the Admin clicks a button, the timer on page.html starts to countdown. If another user visits the page while the timer is counting down, they will see where the timer currently is at. If anyone has any code ideas, other answers on this site I can reference, or the code that I would need, I would be very thankful.

—The real scenario
We have people on skype that are doing a show and they need to know when it’s time to take a break. The idea is that the producer can hit a button that starts a countdown timer to let them know they have 60 seconds till a break. The reason I want this on a web page is because there are other things going on in the page that the person on skype is paying attention to. So I wanted something that they can’t miss. I have access to an sql server, and can do both php and javascript. I’m guessing I will need to do some kind of combination of the two.

UPDATE Thanks everyone for your help.

I’m updating this because I’ve realized that I’m probably making things more complicated than they need to be at this point.
There is a break every 30 min and all shows will either start at the top of an hour or at 30min past. I finally figured out the perfect script. Although it may be slightly off because of normal clock drift, 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 have finally come up with a solution that works. There are still elements I haven’t quite figured out how to fix, but the following code essentially does exactly what I need for 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>