Maison > Article > interface Web > Astuces pour l'heure du serveur de synchronisation Javascript et le compte à rebours de synchronisation_compétences Javascript

Astuces pour l'heure du serveur de synchronisation Javascript et le compte à rebours de synchronisation_compétences Javascript

WBOYoriginal: 2016-05-16 15:38:042605parcourir

J'ai vu quelqu'un demander sur Internet comment afficher l'heure du serveur de manière synchrone sur la page. En fait, il existe plusieurs façons d'y parvenir. La plupart des gens peuvent immédiatement penser qu'ils peuvent utiliser Ajax pour demander le serveur toutes les secondes. puis obtenez l'heure du serveur. Affiché sur la page, bien que cela puisse être réalisé, il y a un gros problème, c'est-à-dire demander au serveur toutes les secondes, donc s'il y a trop d'utilisateurs, le serveur plantera (l'utilisation de la mémoire). sera très volumineux), donc dans mon cas, il semble que cette méthode ne soit pas réalisable. Ici, je vais vous donner une solution qui peut synchroniser l'heure du serveur et le compte à rebours sans prendre trop de ressources du serveur. Ci-dessous, j'écrirai des idées d'implémentation. :

La première étape, Lorsque l'utilisateur navigue sur la page pour la première fois, le serveur obtient d'abord l'heure actuelle et l'affiche sur la page (par exemple : affichée dans la plage horaire avec l'ID)

La deuxième étape, Définissez une nouvelle heure à calculer chaque seconde (la nouvelle heure utilise l'heure du serveur comme valeur initiale, puis accumule une seconde chaque seconde et génère une nouvelle heure)

La troisième étape, afficher le temps calculé lors de la deuxième étape

N'est-ce pas très simple ? Cela peut se résumer en une phrase : prendre l'heure du serveur comme valeur initiale, puis ajouter automatiquement une seconde pour générer une nouvelle heure sur la page chaque seconde. Cela peut assurer la synchronisation avec. l'heure du serveur, et l'erreur est fondamentalement Dans quelques secondes, ça devrait aller. Jetons un coup d'œil au code implémenté :

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

Le code est très simple et je ne l'expliquerai pas ici (j'affiche uniquement les heures, minutes et secondes ci-dessus. Vous pouvez également ajouter la date. Lorsque h==0, vous pouvez obtenir directement une date ou une heure complète du serveur. , comme relecture temporelle), si vous ne comprenez pas, vous pouvez commenter ci-dessous, je répondrai à temps, puis suivrai cette idée pour implémenter un compte à rebours synchronisé. Tout d'abord, laissez-moi vous expliquer ce qu'est un compte à rebours synchronisé. .C'est similaire à une vente flash, en définissant une heure de fin, puis en calculant l'intervalle entre l'heure actuelle et l'heure de fin, et elle doit garantir que le temps du compte à rebours affiché sur les différents ordinateurs et navigateurs est le même. est le suivant :

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

Afin de garantir l'exactitude du compte à rebours, j'ai d'abord calculé l'intervalle de temps du compte à rebours en secondes, puis j'ai soustrait 1 seconde, puis régénéré le format de l'heure. Bien sûr, vous pouvez également suivre l'exemple de synchronisation de l'heure ci-dessus pour réduire directement l'heure. temps. Il existe de nombreuses méthodes, la mienne n'est peut-être pas la meilleure, tout le monde est invité à communiquer, merci !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript détermine si l'opérateur du numéro de téléphone mobile est China Mobile, China Unicom, Telecom ou d'autres compétences (code simple)_javascriptArticle suivant：JavaScript détermine si l'opérateur du numéro de téléphone mobile est China Mobile, China Unicom, Telecom ou d'autres compétences (code simple)_javascript

Articles Liés

Voir plus