demoshop

NEWS

demo, trying to be the best.

站內搜尋載入中...

利用 Java Script 抓取系統時間

  • 3507
  • 1

最近有個需求,要在網頁上秀出 Server 的時間,如果使用 Java Script 來抓,顯示的會是 Client 的時間,可是如果一直去後端拿,那 Server 的負擔就很大了,因此 demo 想到一個「偷吃步」的方式來解決這需求。

    因為想得知 Server 的時間註定是要用後端程式但是每秒都去和後端要一次實在太可怕了,因此 demo 先直接和 Server 取得一次系統時間

    DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    DateTime d1 = new DateTime(1970, 1, 1);
    DateTime d2 = DateTime.Now.ToUniversalTime();
    TimeSpan ts = new TimeSpan(d2.Ticks - d1.Ticks);
    ViewData["serverTime"]= ts.TotalMilliseconds;
    

    這裡取得的是從1970-01-01到目前為止的秒數這是 UNIX 常用的時間戳記(TimeStamp),而Java Script 也是使用這種時間格式因此我們將系統時間轉換為相同格式。



    於Java Script 時就可以直接將後端的時間帶入
    
            var systemTime = parseInt('<%=ViewData["a"] %>');
    
            $(function() { showTime(); });
    
            function runTime() {
                systemTime += 1000;
                showTime(systemTime);
            }
           
            function showTime()
            {
                var t = new Date(systemTime);
                h = "0" + t.getHours();
                m = "0" + t.getMinutes();
                s = "0" + t.getSeconds();
                h = h.substring(h.length - 2, h.length + 1);
                m = m.substring(m.length - 2, m.length + 1);
                s = s.substring(s.length - 2, s.length + 1);
                t = "目前伺服器時間【" + h + "點" + m + "分" + s + "秒】";
                window.status = t;
                setTimeout("runTime()", 1000);
            }
    

    這裡用的技巧就是第一次先將系統時間抓到以後,使用 Java Script 來做一秒加一的動作,因此只有一開始會去後端問時間,再來就都是前端的事情,相當的省資源。

    此例是將時間寫到瀏覽器的狀態列,如果你是使用Firefox可以參考此文章【如何讓 Firefox 支援自定的 window.status】開啟相關支援