6

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

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

更新感谢大家的帮助。

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

<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>
4

4 回答 4

3

听起来您需要一个COMET/Push解决方案，它允许您监控活动客户端并将新数据推送给它们。我不确定 PHP 是不是最好的解决方案，因为还有其他编程语言可以更优雅地处理这个问题。

请参阅：将彗星与 PHP 一起使用？

其他人可能不同意，但Node.js是解决这种特殊类型问题的绝佳解决方案。将Node.js 与Socket.io结合起来，您就有了基本工具来实现您所描述的内容。

简而言之，客户端应用程序将向服务器发送 AJAX 请求。然后服务器将保留该请求，直到它有一些返回（在您的情况下 - 计时器启动，计时器滴答，计时器暂停等）。一旦返回数据，服务器将发出另一个请求并保持，从而重复该过程。如果您的服务器和客户端支持WebSockets，那么可以避免保持 AJAX 连接，而支持 WebSocket（TCP over HTTP）连接。

因为不是每个人都在使用最新版本的 Chrome/Firefox，所以您可能必须支持多种推送方法才能跨浏览器兼容。Socket.io 抽象了通信层（Comet - 长轮询、WebSockets、Adobe Flash Socket、Ajax 多部分流、Forever Iframe、JSONP 轮询），并根据客户端的浏览器功能选择最佳技术。

选择

您还可以使用 javascript 间隔定期轮询服务器（通过 AJAX）以查看是否已设置计时器。但是，您可能会用请求淹没您的服务器，因为每个客户端都会不断地轮询服务器以确定 60 秒计时器是否已启动。

于 2012-09-19T00:28:12.643 回答
2

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

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>
于 2012-09-21T05:50:21.423 回答
0

当管理员启动计时器时，服务器保存start_time和duration计时器（60 秒）（在数据库、文件或其他内容中）。当用户访问 page.html，start_time并duration从服务器接收时，计算finish_time（或finish_time在保存时计算）。然后finish_time - current_time是一个区别，即定时器的当前状态。

$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传递给javascript并倒计时为零。

于 2012-09-19T00:36:45.447 回答
0

这是我现在使用的最终解决方案.... 以下是在一个名为 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);

然后我在页面上使用它来显示最终结果。

<script language="javascript" src="timer.js"></script>
<div id="timer" style='margin-top:150;float:center;color:white;font-size:24px;'></div>
于 2012-09-24T02:01:40.600 回答