開啟小鈴鐺通知

檢舉內容

手機網頁的倒數計時

很多網站，都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術，叫做 Responsive web design (RWD)。

若是要抓手持裝置的 event，不能用 onmousedown 之類的 event，因為它的操作介面不是 mouse。Apple 跟 Android 的瀏覽器，加了 ontouch 系列的 event，諸如 ontouchstart, ontouchmove, ontouchend, ontouchcancel 等四個 event。

倒數計時的時間計算，電腦上因為是多工，所以離開瀏覽器跑別的程式時，Javascript 程式會繼續跑；而在手持裝置上，可能為了省電之類的原因，不在畫面的瀏覽器，Javascript 不會繼續跑。

若是跟時間有關的網頁就有可能產生問題。例如 Javascript 程式若用遞減迴圈計算倒數計，當瀏覽器不在畫面上時，Javascript 就會停止，而再切回瀏覽器時，再從停止處開始跑。這種狀況，就會讓倒數計時變得不準。

以上圖的華南銀行 HTML 頁面為例，它用 frame 切出版面，將 Javascript 寫成的倒數計時器放在最上面的 frame 中。因為它倒數計時，就是用迴圈遞減，所以離開瀏覽器後，迴圈就停止計算了。

將它修改，不用迴圈遞減的方式來做，改成抓 timestamp 的方式來處理，將倒數計時的時間，跟 timestamp 做計算。當瀏覽器切到背景後，Javascript 停止；但它切換回前景後，利用 timestamp 的時間減去程式一開始跑的時間，用戶會覺得計時器有在持續跑，沒有停過。

Javascript 提供的 timestamp 跟 UNIX 的 timestamp 不同，Javascript 準確到千分之一秒，而不是 UNIX 的秒。所以要計算秒數要除一千，並捨棄餘數。

mytime = Math.floor(Date.now() / 1000);

為了調高效能，引用了 or 運算，將小數點後的餘數刪掉 (偷 stackoverflow 上面的程式來用)

mytime = Date.now() / 1000 | 0;

最後的範例程式長這樣: