Heim > Artikel > Web-Frontend > Javascript-Synchronisierungsserverzeit und Synchronisierungs-Countdown-Tipps_Javascript-Kenntnisse

Javascript-Synchronisierungsserverzeit und Synchronisierungs-Countdown-Tipps_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:38:042605Durchsuche

Ich habe im Internet gesehen, wie jemand die Serverzeit synchron auf der Seite anzeigen kann. Tatsächlich gibt es mehrere Möglichkeiten, dies zu erreichen. Die meisten Leute denken vielleicht sofort, dass sie Ajax verwenden können, um den Server jede Sekunde anzufordern Holen Sie sich dann die Zeit vom Server auf der Seite. Obwohl dies möglich ist, gibt es ein großes Problem, nämlich die Anforderung des Servers jede Sekunde. Wenn also zu viele Benutzer vorhanden sind, stürzt der Server ab (Speicherverbrauch). wird sehr groß sein), daher scheint diese Methode in meinem Fall nicht machbar zu sein. Hier werde ich Ihnen eine Lösung geben, die Serverzeit und Countdown synchronisieren kann, ohne zu viele Serverressourcen zu beanspruchen. Im Folgenden werde ich Implementierungsideen schreiben :

Der erste Schritt: Wenn der Benutzer die Seite zum ersten Mal durchsucht, ruft der Server zunächst die aktuelle Uhrzeit ab und zeigt sie auf der Seite an (z. B. wird sie in der Timebox-Spanne mit der ID angezeigt).

Der zweite Schritt: Legen Sie eine neue Zeit fest, die jede Sekunde berechnet werden soll (die neue Zeit verwendet die Serverzeit als Anfangswert, akkumuliert dann jede Sekunde eine Sekunde und generiert eine neue Zeit)

Der dritte Schritt: Anzeige der im zweiten Schritt berechneten Zeit

Ist es nicht ganz einfach? Man kann es in einem Satz zusammenfassen: Nehmen Sie die Serverzeit als Anfangswert und fügen Sie dann automatisch eine Sekunde hinzu, um jede Sekunde eine neue Zeit auf der Seite zu generieren Die Serverzeit und der Fehler sind im Grunde genommen. In ein paar Sekunden sollte es in Ordnung sein. Schauen wir uns den implementierten Code an:

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

Der Code ist sehr einfach und ich werde ihn hier nicht erklären (ich zeige oben nur die Stunden, Minuten und Sekunden an. Sie können auch das Datum hinzufügen. Wenn h==0 ist, können Sie direkt ein Datum oder eine vollständige Uhrzeit erhalten vom Server, als Zeitkorrektur), wenn Sie es nicht verstehen, können Sie unten einen Kommentar abgeben. Ich werde rechtzeitig antworten und dann dieser Idee folgen, um einen synchronisierten Countdown zu implementieren Es ähnelt einem Flash-Sale, bei dem eine Endzeit festgelegt und dann das Intervall zwischen der aktuellen Zeit und der Endzeit berechnet wird. Dabei muss sichergestellt werden, dass die Countdown-Zeit auf verschiedenen Computern und Browsern gleich ist lautet wie folgt:

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

Um die Genauigkeit des Countdowns sicherzustellen, habe ich zuerst das Countdown-Zeitintervall in Sekunden berechnet, dann 1 Sekunde abgezogen und dann das Zeitformat neu generiert. Natürlich können Sie auch dem obigen Zeitsynchronisierungsbeispiel folgen, um das Zeitformat direkt zu reduzieren Es gibt viele Methoden, meine ist vielleicht nicht die beste, jeder ist willkommen, mitzuteilen, danke!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript bestimmt, ob der Mobiltelefonnummernbetreiber China Mobile, China Unicom, Telecom oder andere (einfache Code-)_Javascript-Kenntnisse hatNächster Artikel：JavaScript bestimmt, ob der Mobiltelefonnummernbetreiber China Mobile, China Unicom, Telecom oder andere (einfache Code-)_Javascript-Kenntnisse hat

In Verbindung stehende Artikel

Mehr sehen