手機網頁的倒數計時
更新於 發佈於 閱讀時間約 2 分鐘
很多網站，都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術，叫做 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;
最後的範例程式長這樣:
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
2會員
26內容數
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
隨著科技的不斷發展，網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢，包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
JavaScript30 傳送門：https://javascript30.com/
今天才發現可以不用看著影片一步一步寫，可以自己先寫寫看😛
第二個挑戰是用 JS + CSS 寫一個時鐘，不過其實檔案裡面 HTML 跟 CSS 都已經寫好了，三個指針也都放好了，Go Live 起來就長
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
總是在下班後，無意識地划著手機。猛然一看時間，發現一下子就過了兩小時、三小時、四小時.....。也常常在事後總是在心中提醒自己，去做點別的事吧，不管有沒有意義，都比划下去好。
但，總是事與願違。一天又一天。一晚又一晚。
我總是直接說，我網路上癮了。
我想阿，跟我有同樣狀態的人可不少。
閒暇時
程式與頻率時間
看起來這個問題有些奇怪，程式與頻率時間有什麼關係呢？一旦程式完成，似乎就不需要再理會頻率和時間了。實際上，這可能是一些不熟悉程式設計的人所提出的疑問。了解程式設計最重要的一點是，頻率和時間的安排會直接影響程式的效能和展現速度。
時間的利用
舉例來說，假設一個表單的每筆處理時間為
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
隨著科技的不斷發展，網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢，包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
JavaScript30 傳送門：https://javascript30.com/
今天才發現可以不用看著影片一步一步寫，可以自己先寫寫看😛
第二個挑戰是用 JS + CSS 寫一個時鐘，不過其實檔案裡面 HTML 跟 CSS 都已經寫好了，三個指針也都放好了，Go Live 起來就長
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
總是在下班後，無意識地划著手機。猛然一看時間，發現一下子就過了兩小時、三小時、四小時.....。也常常在事後總是在心中提醒自己，去做點別的事吧，不管有沒有意義，都比划下去好。
但，總是事與願違。一天又一天。一晚又一晚。
我總是直接說，我網路上癮了。
我想阿，跟我有同樣狀態的人可不少。
閒暇時
程式與頻率時間
看起來這個問題有些奇怪，程式與頻率時間有什麼關係呢？一旦程式完成，似乎就不需要再理會頻率和時間了。實際上，這可能是一些不熟悉程式設計的人所提出的疑問。了解程式設計最重要的一點是，頻率和時間的安排會直接影響程式的效能和展現速度。
時間的利用
舉例來說，假設一個表單的每筆處理時間為
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。