ホームページ > 記事 > ウェブフロントエンド > Javascript 同期サーバー時間と同期カウントダウンのヒント_JavaScript スキル
Javascript 同期サーバー時間と同期カウントダウンのヒント_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:38:042604ブラウズ
インターネットで、ページ上でサーバー時刻を同期的に表示する方法を尋ねている人を見かけました。実際、ほとんどの人は、Ajax を使用してサーバーを毎秒リクエストできるとすぐに考えるかもしれません。次に、サーバーから時刻を取得してページに表示します。これは実現できますが、サーバーに毎秒リクエストするという大きな問題があるため、ユーザーが多すぎるとサーバーがクラッシュします（メモリ使用量）。非常に大きくなります）ので、私の場合、この方法は実現不可能のようです。 ここでは、サーバーリソースをあまり消費せずにサーバー時間とカウントダウンを同期できる解決策を示します。 の実装アイデアを以下に書きます。 :
最初のステップ ユーザーが初めてページを閲覧すると、サーバーはまず現在時刻を取得してページに表示します (例: ID を使用してタイムボックス スパンに表示します)
2 番目のステップ、毎秒計算される新しい時刻を設定します (新しい時刻はサーバー時刻を初期値として使用し、1 秒ごとに 1 秒を累積して新しい時刻を生成します)
3 番目のステップ、2 番目のステップで計算された時間を表示します
とても簡単ですね。一言でまとめると、サーバー時刻を初期値として、自動的に 1 秒を加算してページ上で 1 秒ごとに新しい時刻を生成します。サーバー時間、エラーは基本的に数秒以内に表示されます。実装されたコードを見てみましょう。
<span id="timebox">11:21:55</span> //第一次将服务器时间显示在这里
<script type="text/javascript">
$(function () {
var oTime = $("#timebox");
var ts = oTime.text().split(":", 3);
var tnums = [parseInt(ts[0]), parseInt(ts[1]), parseInt(ts[2])];
setInterval(function () {
tnums = getNextTimeNumber(tnums[0], tnums[1], tnums[2]);
showNewTime(tnums[0], tnums[1], tnums[2]);
}, 1000);
function showNewTime(h, m, s) {
var timeStr = ("0" + h.toString()).substr(-2) + ":"
+ ("0" + m.toString()).substr(-2) + ":"
+ ("0" + s.toString()).substr(-2);
oTime.text(timeStr);
}
function getNextTimeNumber(h, m, s) {
if (++s == 60) {
s = 0;
}
if (s == 0) {
if (++m == 60) {
m = 0;
}
}
if (m == 0) {
if (++h == 24) {
h = 0;
}
}
return [h, m, s];
}
});
</script>
コードは非常に単純なので、ここでは説明しません (上では時、分、秒を表示するだけです。日付を追加することもできます。h==0 の場合、日付または完全な時刻を直接取得できます)理解できない場合は、以下にコメントしてください。時間内に返信します。その後、このアイデアに従って同期カウントダウンを実装します。まず、同期カウントダウンとは何かについて説明します。これはフラッシュ セールに似ており、終了時刻を設定し、現在時刻と終了時刻の間の間隔を計算し、異なるコンピュータやブラウザで表示されるカウントダウン時刻が同じになるようにする必要があります。は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<title>同步倒计时</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<span id="timebox">1天00时00分12秒</span> <!--假设：1天00时00分12秒是从服务器获取的倒计时数据-->
<script type="text/javascript">
$(function () {
var tid = setInterval(function () {
var oTimebox = $("#timebox");
var syTime = oTimebox.text();
var totalSec = getTotalSecond(syTime) - 1;
if (totalSec >= 0) {
oTimebox.text(getNewSyTime(totalSec));
} else {
clearInterval(tid);
}
}, 1000);
//根据剩余时间字符串计算出总秒数
function getTotalSecond(timestr) {
var reg = /\d+/g;
var timenums = new Array();
while ((r = reg.exec(timestr)) != null) {
timenums.push(parseInt(r));
}
var second = 0, i = 0;
if (timenums.length == 4) {
second += timenums[0] * 24 * 3600;
i = 1;
}
second += timenums[i] * 3600 + timenums[++i] * 60 + timenums[++i];
return second;
}
//根据剩余秒数生成时间格式
function getNewSyTime(sec) {
var s = sec % 60;
sec = (sec - s) / 60; //min
var m = sec % 60;
sec = (sec - m) / 60; //hour
var h = sec % 24;
var d = (sec - h) / 24;//day
var syTimeStr = "";
if (d > 0) {
syTimeStr += d.toString() + "天";
}
syTimeStr += ("0" + h.toString()).substr(-2) + "时"
+ ("0" + m.toString()).substr(-2) + "分"
+ ("0" + s.toString()).substr(-2) + "秒";
return syTimeStr;
}
});
</script>
</body>
</html>
カウントダウンの精度を確保するために、最初にカウントダウン時間間隔を秒単位で計算し、次に 1 秒を減算して時刻形式を再生成しました。 もちろん、上記の時刻同期の例に従って、時間を直接短縮することもできます。たくさんの方法がありますが、私の方法が最善ではないかもしれません。誰でもコミュニケーションを歓迎します、ありがとう！