手機網頁的倒數計時

更新於 發佈於 閱讀時間約 3 分鐘

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

Image by Patrick Skrbinjek from Pixabay

若是要抓手持裝置的 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;

最後的範例程式長這樣:


留言
avatar-img
留言分享你的想法!
avatar-img
WILSON PENG的沙龍
2會員
26內容數
WILSON PENG的沙龍的其他內容
2023/02/02
UTF-8 萬國碼在規格定義時,有建議在文件的開始處,加入位元組順序記號 (BOM, byte-order mark)。但 Plain Text 文件,就是全部都是文字,將它加入檔頭標記,就不是純文字檔案了,所以一般都沒有實作成有 BOM 檔頭的檔案。
Thumbnail
2023/02/02
UTF-8 萬國碼在規格定義時,有建議在文件的開始處,加入位元組順序記號 (BOM, byte-order mark)。但 Plain Text 文件,就是全部都是文字,將它加入檔頭標記,就不是純文字檔案了,所以一般都沒有實作成有 BOM 檔頭的檔案。
Thumbnail
2023/01/11
要怎麼判斷是奇數還是偶數? 除以 2 有餘數的是奇數,無餘數的是偶數。 有沒有更快的方法?
Thumbnail
2023/01/11
要怎麼判斷是奇數還是偶數? 除以 2 有餘數的是奇數,無餘數的是偶數。 有沒有更快的方法?
Thumbnail
2022/12/07
當使用 Wordpress 架站時,系統至少會有四層漏洞:
Thumbnail
2022/12/07
當使用 Wordpress 架站時,系統至少會有四層漏洞:
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
響應式網頁設計(RWD)是一種網頁設計方法,其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素,確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題,提高用戶滿意度,節省開發和維護成本。
Thumbnail
響應式網頁設計(RWD)是一種網頁設計方法,其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素,確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題,提高用戶滿意度,節省開發和維護成本。
Thumbnail
隨著科技的不斷發展,網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢,包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
Thumbnail
隨著科技的不斷發展,網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢,包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
Thumbnail
RWD網頁設計,也被稱為響應式或回應式網頁設計。隨著越來越多人使用手機和平板電腦上網,RWD的網頁設計在提升用戶的瀏覽體驗方面扮演著關鍵角色。如果用戶第一次訪問網站時發現頁面內容呈現不佳,這往往會給他們留下負面的印象,導致他們離開該網站,轉而尋找其他競爭者的網站。
Thumbnail
RWD網頁設計,也被稱為響應式或回應式網頁設計。隨著越來越多人使用手機和平板電腦上網,RWD的網頁設計在提升用戶的瀏覽體驗方面扮演著關鍵角色。如果用戶第一次訪問網站時發現頁面內容呈現不佳,這往往會給他們留下負面的印象,導致他們離開該網站,轉而尋找其他競爭者的網站。
Thumbnail
很多網站,都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術,叫做 Responsive web design (RWD)。
Thumbnail
很多網站,都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術,叫做 Responsive web design (RWD)。
Thumbnail
手機尺寸不適合複雜的功能介面 RWD 網站在開發上需對多種尺寸裝置進行調校,且要以一網站來呈現,所花費的時間自然比起傳統網站來的長;但比起開發多種版面網站,整體開發時程還是快許多。 網頁載入時間較長
Thumbnail
手機尺寸不適合複雜的功能介面 RWD 網站在開發上需對多種尺寸裝置進行調校,且要以一網站來呈現,所花費的時間自然比起傳統網站來的長;但比起開發多種版面網站,整體開發時程還是快許多。 網頁載入時間較長
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News