javascript同步伺服器時間和同步倒計時小技巧

javascript同步伺服器時間和同步倒計時小技巧_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

之前在網上看到有人提問，如何在頁面上同步顯示伺服器的時間，其實實現方法有幾種，可能一般人立馬就想到可以使用Ajax每隔一秒去請求伺服器，然後將伺服器擷取到時間顯示在頁面上，這樣雖然能夠實現，但存在一個很大的問題，那就是每隔一秒去請求伺服器，這樣如果使用者多了，伺服器就會崩潰（記憶體佔用率會很大），所以在我看來，這種方法不可行，我這裡給出一種解決方案，能夠實現同步伺服器時間、同步倒計時，卻不佔用伺服器太多資源，下面我給寫實現的思路：

第一步，當使用者第一次瀏覽頁面時，伺服器首先擷取目前時間並顯示在頁面上（比如：顯示在ID為timebox span中）

第二步，設定一個每隔一秒就計算新的時間（新時間以伺服器時間為初始值，然後每隔一秒累加一秒並產生新的時間）

第三步，顯示第二步計算的時間

是不是很簡單，總結成一句話就是：以伺服器時間為初始值，然後在頁面上自動每隔一秒就累加一秒產生新時間，這樣就能保證與伺服器時間同步了，誤差基本在幾秒內，應該沒關係了，好了看一下實現的代碼吧：

<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秒再重建時間格式，當然也可以按照上面時間同步的例子，直接進行時間減少，方法很多，我這個不一定是最優的，歡迎大家交流，謝謝！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More