Javascript和PHP倒数计时器对于每个人来说都是一样的 [英] Javascript and PHP countdown Timer that displays the same for everyone

问题描述

我有脚本需要生成一个具有开始和恢复按钮的倒数计时器。我试图做的是在一个页面上启动，停止和重置按钮，控制另一页上的定时器。
因此，如果用户X访问page.html，他们将看到一个计时器为0.
Admin X访问admin.html，他们将定时器看到0，但它们也有一个开始，停止和重置纽扣。当管理员点击一个按钮时，page.html上的计时器开始倒计时。如果另一个用户在定时器倒数时访问页面，他们将看到当前定时器的位置。如果任何人有任何代码想法，我可以参考这个网站上的其他答案，或者我需要的代码，我会非常感谢。

---真实的场景
我们有Skype上的人正在做一个节目，他们需要知道什么时候休息。这个想法是，制片人可以点击一个启动倒数计时器的按钮，让他们知道他们有60秒钟，直到休息。我想在网页上的原因是因为Skype上的人正在关注的页面中还有其他一些事情。所以我想要的东西，他们不能错过。我可以访问一个sql server，并且可以同时执行php和javascript。我猜想我将需要做一些这样的组合。

更新感谢大家的帮助。

我正在更新这个，因为我意识到我'这可能使事情比他们现在更复杂。
每30分钟有一个休息时间，所有节目将从一小时的顶部或30分钟开始。我终于找出了完美的剧本。虽然由于正常的时钟漂移可能会稍微关闭，但实际上应该显示相同的，无论谁进入页面。

 < script> 
函数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 = 计时器 >< / TD> 
< td nowrap =nowrapwidth =15px>< p style =text-align：left;>< / p>< / td> 
< td style =font-size：24px;>分钟到站中断。< / td>< / tr> 
< / tbody>< / table> 
< / div> 
  

解决方案

我终于想出了一个有效的解决方案。还有一些元素我还没有弄清楚如何修复，但下面的代码基本上完全符合我现在所需要的。

  setInterval（function（）{
 function addZero（i）{
 if（i& ）{
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  - ）; 
 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;'&打破+< / span>; 
 
 if（m> 30）{
y = b; 
} 
 else if（m < ）{
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 =centerid =timerstyle ='color：black; font-size：24px;'>< / div> 
  

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>

解决方案

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>

这篇关于Javascript和PHP倒数计时器对于每个人来说都是一样的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！