手機網頁的倒數計時

更新 發佈閱讀 3 分鐘

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

vocus|新世代的創作平台

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

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

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

vocus|新世代的創作平台

以上圖的華南銀行 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
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
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
隨著科技的不斷發展,網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢,包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
Thumbnail
隨著科技的不斷發展,網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢,包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
Thumbnail
響應式網頁設計(RWD)是一種網頁設計方法,其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素,確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題,提高用戶滿意度,節省開發和維護成本。
Thumbnail
響應式網頁設計(RWD)是一種網頁設計方法,其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素,確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題,提高用戶滿意度,節省開發和維護成本。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
Thumbnail
RWD網頁設計,也被稱為響應式或回應式網頁設計。隨著越來越多人使用手機和平板電腦上網,RWD的網頁設計在提升用戶的瀏覽體驗方面扮演著關鍵角色。如果用戶第一次訪問網站時發現頁面內容呈現不佳,這往往會給他們留下負面的印象,導致他們離開該網站,轉而尋找其他競爭者的網站。
Thumbnail
RWD網頁設計,也被稱為響應式或回應式網頁設計。隨著越來越多人使用手機和平板電腦上網,RWD的網頁設計在提升用戶的瀏覽體驗方面扮演著關鍵角色。如果用戶第一次訪問網站時發現頁面內容呈現不佳,這往往會給他們留下負面的印象,導致他們離開該網站,轉而尋找其他競爭者的網站。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
現今,響應式網頁設計已成為網站設計不可或缺的一部分,良好的設計可以為公司帶來豐厚的收益,現在也成為不少公司的首選方案,就讓我們看下去吧!
Thumbnail
現今,響應式網頁設計已成為網站設計不可或缺的一部分,良好的設計可以為公司帶來豐厚的收益,現在也成為不少公司的首選方案,就讓我們看下去吧!
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
很多網站,都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術,叫做 Responsive web design (RWD)。
Thumbnail
很多網站,都要求前端工程師要做出在手機跟電腦上都能順利顯示的介面。這種自動調整手機跟桌機的技術,叫做 Responsive web design (RWD)。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
手機尺寸不適合複雜的功能介面 RWD 網站在開發上需對多種尺寸裝置進行調校,且要以一網站來呈現,所花費的時間自然比起傳統網站來的長;但比起開發多種版面網站,整體開發時程還是快許多。 網頁載入時間較長
Thumbnail
手機尺寸不適合複雜的功能介面 RWD 網站在開發上需對多種尺寸裝置進行調校,且要以一網站來呈現,所花費的時間自然比起傳統網站來的長;但比起開發多種版面網站,整體開發時程還是快許多。 網頁載入時間較長
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News