理想Web倒計時器的設(shè)計與實現(xiàn)

理想Web倒計時器的設(shè)計與實現(xiàn)

摘要Web頁面的倒計時程序一般采用JavaScript實現(xiàn)?；谖闹蟹治龅亩喾N原因，純粹使用JavaScript無法做到倒計時器的防刷新、防關(guān)閉、自校正功能，到目前為止，還未通過搜索引擎檢索到具有以上功能的倒計時器例子。針對這種情況，本文給出了一種結(jié)合動態(tài)腳本與JavaScript技術(shù)的防刷新、防關(guān)閉、自校正的Web倒計時程序，在實際項目開發(fā)中具有實用價值。

關(guān)鍵詞倒計時器；JavaScript；防刷新；防關(guān)閉1引言

使用倒計時，可以讓用戶清楚地了解離特定事件還剩余多少時間，因此在搶答系統(tǒng)、在線考試系統(tǒng)、節(jié)日倒計時等應(yīng)用中都使用到倒計時。在Web應(yīng)用中，一般使用JavaScript來設(shè)計倒計時程序。JavaScript中的setInterval()函數(shù)可以作為定時器，每隔一段時間執(zhí)行指定的事件，但是這種定時器由于運行環(huán)境的限制，一旦用戶刷新頁面或關(guān)閉頁面再打開，倒計時器又會重新計時，另外，由于JavaScript運行速度較慢，自身運行要占用一定時間，這種倒計時器也很難做到精確計時。普通倒計時器的缺陷主要表現(xiàn)在以下幾個方面：

①頁面刷新后重新開始倒計時。

②面關(guān)閉再打開后重新開始倒計時。

③無法做到全部客戶端同步。

④計時不精確，無法對自身進行校正。

⑤一旦客戶端修改了計算機時鐘，倒計時將會失敗。

普通倒計時器之所以存在以上問題，究其原因，在于下面幾個方面：

⑴定時器設(shè)計技術(shù)。Web頁面中的定時器使用JavaScript進行設(shè)計，由于HTTP連接不是一種持續(xù)連接，完成用戶請求后，連接立即關(guān)閉，JavaScript的這種運行環(huán)境就決定了它不能記錄用戶的狀態(tài)，每當(dāng)頁面刷新或頁面關(guān)閉再打開后，相應(yīng)JavaScript的變量會重新進行初始化，表現(xiàn)為倒計時重新計時。

⑵JavaScript的運行速度。JavaScript以解釋方法執(zhí)行，運行速度較編譯型語言慢。倒計時器設(shè)計時一般會使用到setInterval(function，interval)函數(shù)作為定時器，其中，interval為定時器間隔，單位為毫秒，function為定時器每隔interval指定的時間間隔觸發(fā)的動作。如果function中含有復(fù)雜運算，并且由于JavaScript的執(zhí)行速度較慢，定時器就會被拖慢，例如定義的間隔為1000ms，實際運行的間隔可能為1100ms，這樣整個倒計時器的精度就會受到影響。

⑶Web頁面的隨機請求方式。由于用戶的請求是隨機的，不可能要求所有用戶在同一時間打開頁面進行倒計時，所以無法做到所有客戶端的倒計時同步。2防刷新防關(guān)閉自校正的倒計時器設(shè)計思路

單純使用客戶端頁面中的JavaScript無法設(shè)計出理想的Web倒計時程序，必須把動態(tài)腳本技術(shù)與客戶端的JavaScript結(jié)合起來才可以實現(xiàn)符合要求的倒計時器。

由于客戶端顯示的時間各不相同，所以不能作為倒計時器的時間參考，否則無法實現(xiàn)所有客戶端的倒計時同步，但在B/S系統(tǒng)中，服務(wù)器的時間對于每一個客戶端來說都是一致的，我們可以把服務(wù)器的時間作為倒計時參考時間，實現(xiàn)所有客戶端的同步倒計時。

在動態(tài)腳本語言(ASP、PHP、JSP)中可以很方便地取得服務(wù)器的當(dāng)前時間。對于倒計時程序來說，都要指定一個結(jié)束時間，可以通過計算出一個服務(wù)器當(dāng)前時間和結(jié)束時間之間的時間間隔，這個時間間隔反映了當(dāng)前服務(wù)器時間離倒計時結(jié)束時間還有多長時間，無論用戶怎樣刷新、關(guān)閉再打開頁面，計算出的這個時間間隔都是與客戶端一致的，這樣就避免了刷新、關(guān)閉再打開后倒計時器重新計時的問題。

由于JavaScript是一種解釋型語言，執(zhí)行速度較編譯型語言慢，每次執(zhí)行setInterval()函數(shù)時每次都會產(chǎn)生一個很小的誤差，雖然這個誤差很小，但是這些小誤差積累起來后卻不容忽視，會嚴(yán)重影響倒計時器的精度，進而影響到客戶端的同步。雖然各個客戶端上的時鐘各不相同，但是，我們可以認為所有客戶端計算機的時鐘步進是一致的，即A計算機時鐘產(chǎn)生的1秒時間間隔與B計算機時間產(chǎn)生時間間隔是相同的，所以，我們可以把客戶端計算機時鐘作為觀察倒計時器快慢的參照物，做出setInterval()函數(shù)的實際執(zhí)行時間間隔與本地客戶機時鐘流逝時間間隔的差值，以這個差值作為反饋，修改setInterval()函數(shù)的執(zhí)行間隔，從而達到自校正的目的，實現(xiàn)倒計時器的精確計時。

另外，在使用上述自校正方法時，我們要考慮到在定時器執(zhí)行時，客戶修改了本地時鐘的情況。一般情況下，我們得到的反饋差值不會太大，這里把1000ms作為閾值，一旦得到的差值大于1000ms，程序會認為客戶修改了本地計算機時鐘，停止自校正。仍使用原來的間隔時間，這樣便解決了這個問題。3代碼實現(xiàn)

根據(jù)以上的設(shè)計思路，使用JSP作為動態(tài)腳本語言，實現(xiàn)了一個防刷新、防關(guān)閉、自校正、客戶端調(diào)節(jié)時鐘不敏感的倒計時器。該倒計時器由兩個文件組成，djs.js中為JavaScript倒計時器的主體，實現(xiàn)倒計時功能；djs.jsp中獲取服務(wù)器時間，調(diào)用djs.js中的start()方法開始倒計時，并顯示出倒計時結(jié)果。/*****djs.jsp*****/<%@pageimport="java.text.SimpleDateFo