6

開始ボタンと再開ボタンを持つカウントダウン タイマーを生成するために必要なスクリプトがあります。私がやろうとしているのは、1 つのページに開始、停止、およびリセット ボタンを配置し、別のページのタイマーを制御することです。したがって、ユーザー X が page.html にアクセスすると、0 のタイマーが表示されます。管理者 X が admin.html にアクセスすると、0 のタイマーが表示されますが、開始、停止、およびリセット ボタンもあります。管理者がボタンをクリックすると、page.html のタイマーがカウントダウンを開始します。タイマーのカウントダウン中に別のユーザーがページにアクセスすると、タイマーの現在の位置が表示されます。誰かがコードのアイデア、参照できるこのサイトの他の回答、または必要なコードを持っている場合は、非常に感謝しています。

---実際のシナリオ Skype でショーを行っている人がいて、いつ休憩するかを知る必要があります。アイデアは、プロデューサーがカウントダウンタイマーを開始するボタンを押して、休憩まで60秒あることを知らせることができるということです. 私がこれを Web ページに追加したい理由は、スカイプの人が注意を払っているページで他のことが起こっているからです。だから私は彼らが見逃せない何かが欲しかった. SQL サーバーにアクセスでき、php と javascript の両方を実行できます。私は、この 2 つの組み合わせを何らかの方法で行う必要があると考えています。

更新 ご協力いただきありがとうございます。

これを更新しているのは、おそらく必要以上に複雑にしていることに気付いたからです。30 分ごとに休憩があり、すべてのショーは 1 時間前または 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をサポートしている場合は、WebSocket (TCP over HTTP) 接続を優先して、保留中の AJAX 接続を回避できます。

誰もが最新バージョンの 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

管理者がタイマーを開始すると、サーバーはタイマー (60 秒) を保存start_timeします (データベース、ファイルなどに)。durationユーザーが page.html にアクセスし、サーバーから受信すると、計算start_time(または保存時に計算) されます。次に、タイマーの現在の状態である違いがあります。durationfinish_timefinish_timefinish_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_stateJavaScript に渡され、カウントダウンがゼロになります。

于 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 に答える