Javascript 和 PHP 倒计时计时器，每个人都显示相同 [英] Javascript and PHP countdown Timer that displays the same for everyone

问题描述

我有生成具有开始和恢复按钮的倒数计时器所需的脚本.我试图做的是在一个页面上设置开始、停止和重置按钮，以控制另一页上的计时器.因此，如果用户 X 访问 page.html，他们将看到一个时间为 0 的计时器.管理员 X 访问 admin.html，在那里他们看到计时器为 0，但他们也有开始、停止和重置按钮.当管理员单击按钮时，page.html 上的计时器开始倒计时.如果另一个用户在计时器倒计时时访问该页面，他们将看到计时器当前所在的位置.如果有人有任何代码想法、我可以参考的本网站上的其他答案，或者我需要的代码，我将不胜感激.

---真实场景我们在 Skype 上有人在做节目，他们需要知道什么时候该休息一下.这个想法是制作人可以点击一个按钮来启动倒数计时器，让他们知道他们还有 60 秒可以休息.我希望在网页上显示此内容的原因是，Skype 上的人正在关注该页面中正在发生的其他事情.所以我想要一些他们不能错过的东西.我可以访问 sql 服务器，并且可以执行 php 和 javascript.我猜我需要将两者结合起来.

更新感谢大家的帮助.

我正在更新这个，因为我意识到我现在可能让事情变得比他们需要的更复杂.每 30 分钟有一次休息时间，所有节目将在一个小时结束时或在 30 分钟后开始.我终于想出了完美的剧本.虽然可能因为正常的时钟漂移而略微偏离，但无论谁进入页面，它实际上应该显示相同.

<div align="center"><table><tbody><tr><td style="font-size:34px;"id="计时器"></td><td nowrap="nowrap" width="15px"><p style="text-align: left;"></p></td><td style="font-size:24px;">距离停站还有几分钟.</td></tr></tbody></table>

解决方案

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

setInterval(function() {函数 addZero(i) {如果 (i <10) {i = "0" + i;}返回我；}var x = document.getElementById("timer");var d = 新日期();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;'>"+ "中断" + "</span>";var v = "<span style='color:black;font-size:24px;'>"+ "中断" + "</span>";如果 (m > 30) {y = b;}否则如果 (m <30) {y = 一个；}如果 (y < 2 && c < 15) {q = z;}别的 {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>

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屋！