下載本文檔
版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
理想Web倒計(jì)時(shí)器的設(shè)計(jì)與實(shí)現(xiàn)
摘要Web頁(yè)面的倒計(jì)時(shí)程序一般采用JavaScript實(shí)現(xiàn)?;谖闹蟹治龅亩喾N原因,純粹使用JavaScript無(wú)法做到倒計(jì)時(shí)器的防刷新、防關(guān)閉、自校正功能,到目前為止,還未通過(guò)搜索引擎檢索到具有以上功能的倒計(jì)時(shí)器例子。針對(duì)這種情況,本文給出了一種結(jié)合動(dòng)態(tài)腳本與JavaScript技術(shù)的防刷新、防關(guān)閉、自校正的Web倒計(jì)時(shí)程序,在實(shí)際項(xiàng)目開(kāi)發(fā)中具有實(shí)用價(jià)值。
關(guān)鍵詞倒計(jì)時(shí)器;JavaScript;防刷新;防關(guān)閉1引言
使用倒計(jì)時(shí),可以讓用戶清楚地了解離特定事件還剩余多少時(shí)間,因此在搶答系統(tǒng)、在線考試系統(tǒng)、節(jié)日倒計(jì)時(shí)等應(yīng)用中都使用到倒計(jì)時(shí)。在Web應(yīng)用中,一般使用JavaScript來(lái)設(shè)計(jì)倒計(jì)時(shí)程序。JavaScript中的setInterval()函數(shù)可以作為定時(shí)器,每隔一段時(shí)間執(zhí)行指定的事件,但是這種定時(shí)器由于運(yùn)行環(huán)境的限制,一旦用戶刷新頁(yè)面或關(guān)閉頁(yè)面再打開(kāi),倒計(jì)時(shí)器又會(huì)重新計(jì)時(shí),另外,由于JavaScript運(yùn)行速度較慢,自身運(yùn)行要占用一定時(shí)間,這種倒計(jì)時(shí)器也很難做到精確計(jì)時(shí)。普通倒計(jì)時(shí)器的缺陷主要表現(xiàn)在以下幾個(gè)方面:
①頁(yè)面刷新后重新開(kāi)始倒計(jì)時(shí)。
②面關(guān)閉再打開(kāi)后重新開(kāi)始倒計(jì)時(shí)。
③無(wú)法做到全部客戶端同步。
④計(jì)時(shí)不精確,無(wú)法對(duì)自身進(jìn)行校正。
⑤一旦客戶端修改了計(jì)算機(jī)時(shí)鐘,倒計(jì)時(shí)將會(huì)失敗。
普通倒計(jì)時(shí)器之所以存在以上問(wèn)題,究其原因,在于下面幾個(gè)方面:
⑴定時(shí)器設(shè)計(jì)技術(shù)。Web頁(yè)面中的定時(shí)器使用JavaScript進(jìn)行設(shè)計(jì),由于HTTP連接不是一種持續(xù)連接,完成用戶請(qǐng)求后,連接立即關(guān)閉,JavaScript的這種運(yùn)行環(huán)境就決定了它不能記錄用戶的狀態(tài),每當(dāng)頁(yè)面刷新或頁(yè)面關(guān)閉再打開(kāi)后,相應(yīng)JavaScript的變量會(huì)重新進(jìn)行初始化,表現(xiàn)為倒計(jì)時(shí)重新計(jì)時(shí)。
⑵JavaScript的運(yùn)行速度。JavaScript以解釋方法執(zhí)行,運(yùn)行速度較編譯型語(yǔ)言慢。倒計(jì)時(shí)器設(shè)計(jì)時(shí)一般會(huì)使用到setInterval(function,interval)函數(shù)作為定時(shí)器,其中,interval為定時(shí)器間隔,單位為毫秒,function為定時(shí)器每隔interval指定的時(shí)間間隔觸發(fā)的動(dòng)作。如果function中含有復(fù)雜運(yùn)算,并且由于JavaScript的執(zhí)行速度較慢,定時(shí)器就會(huì)被拖慢,例如定義的間隔為1000ms,實(shí)際運(yùn)行的間隔可能為1100ms,這樣整個(gè)倒計(jì)時(shí)器的精度就會(huì)受到影響。
⑶Web頁(yè)面的隨機(jī)請(qǐng)求方式。由于用戶的請(qǐng)求是隨機(jī)的,不可能要求所有用戶在同一時(shí)間打開(kāi)頁(yè)面進(jìn)行倒計(jì)時(shí),所以無(wú)法做到所有客戶端的倒計(jì)時(shí)同步。2防刷新防關(guān)閉自校正的倒計(jì)時(shí)器設(shè)計(jì)思路
單純使用客戶端頁(yè)面中的JavaScript無(wú)法設(shè)計(jì)出理想的Web倒計(jì)時(shí)程序,必須把動(dòng)態(tài)腳本技術(shù)與客戶端的JavaScript結(jié)合起來(lái)才可以實(shí)現(xiàn)符合要求的倒計(jì)時(shí)器。
由于客戶端顯示的時(shí)間各不相同,所以不能作為倒計(jì)時(shí)器的時(shí)間參考,否則無(wú)法實(shí)現(xiàn)所有客戶端的倒計(jì)時(shí)同步,但在B/S系統(tǒng)中,服務(wù)器的時(shí)間對(duì)于每一個(gè)客戶端來(lái)說(shuō)都是一致的,我們可以把服務(wù)器的時(shí)間作為倒計(jì)時(shí)參考時(shí)間,實(shí)現(xiàn)所有客戶端的同步倒計(jì)時(shí)。
在動(dòng)態(tài)腳本語(yǔ)言(ASP、PHP、JSP)中可以很方便地取得服務(wù)器的當(dāng)前時(shí)間。對(duì)于倒計(jì)時(shí)程序來(lái)說(shuō),都要指定一個(gè)結(jié)束時(shí)間,可以通過(guò)計(jì)算出一個(gè)服務(wù)器當(dāng)前時(shí)間和結(jié)束時(shí)間之間的時(shí)間間隔,這個(gè)時(shí)間間隔反映了當(dāng)前服務(wù)器時(shí)間離倒計(jì)時(shí)結(jié)束時(shí)間還有多長(zhǎng)時(shí)間,無(wú)論用戶怎樣刷新、關(guān)閉再打開(kāi)頁(yè)面,計(jì)算出的這個(gè)時(shí)間間隔都是與客戶端一致的,這樣就避免了刷新、關(guān)閉再打開(kāi)后倒計(jì)時(shí)器重新計(jì)時(shí)的問(wèn)題。
由于JavaScript是一種解釋型語(yǔ)言,執(zhí)行速度較編譯型語(yǔ)言慢,每次執(zhí)行setInterval()函數(shù)時(shí)每次都會(huì)產(chǎn)生一個(gè)很小的誤差,雖然這個(gè)誤差很小,但是這些小誤差積累起來(lái)后卻不容忽視,會(huì)嚴(yán)重影響倒計(jì)時(shí)器的精度,進(jìn)而影響到客戶端的同步。雖然各個(gè)客戶端上的時(shí)鐘各不相同,但是,我們可以認(rèn)為所有客戶端計(jì)算機(jī)的時(shí)鐘步進(jìn)是一致的,即A計(jì)算機(jī)時(shí)鐘產(chǎn)生的1秒時(shí)間間隔與B計(jì)算機(jī)時(shí)間產(chǎn)生時(shí)間間隔是相同的,所以,我們可以把客戶端計(jì)算機(jī)時(shí)鐘作為觀察倒計(jì)時(shí)器快慢的參照物,做出setInterval()函數(shù)的實(shí)際執(zhí)行時(shí)間間隔與本地客戶機(jī)時(shí)鐘流逝時(shí)間間隔的差值,以這個(gè)差值作為反饋,修改setInterval()函數(shù)的執(zhí)行間隔,從而達(dá)到自校正的目的,實(shí)現(xiàn)倒計(jì)時(shí)器的精確計(jì)時(shí)。
另外,在使用上述自校正方法時(shí),我們要考慮到在定時(shí)器執(zhí)行時(shí),客戶修改了本地時(shí)鐘的情況。一般情況下,我們得到的反饋差值不會(huì)太大,這里把1000ms作為閾值,一旦得到的差值大于1000ms,程序會(huì)認(rèn)為客戶修改了本地計(jì)算機(jī)時(shí)鐘,停止自校正。仍使用原來(lái)的間隔時(shí)間,這樣便解決了這個(gè)問(wèn)題。3代碼實(shí)現(xiàn)
根據(jù)以上的設(shè)計(jì)思路,使用JSP作為動(dòng)態(tài)腳本語(yǔ)言,實(shí)現(xiàn)了一個(gè)防刷新、防關(guān)閉、自校正、客戶端調(diào)節(jié)時(shí)鐘不敏感的倒計(jì)時(shí)器。該倒計(jì)時(shí)器由兩個(gè)文件組成,djs.js中為JavaScript倒計(jì)時(shí)器的主體,實(shí)現(xiàn)倒計(jì)時(shí)功能;djs.jsp中獲取服務(wù)器時(shí)間,調(diào)用djs.js中的start()方法開(kāi)始倒計(jì)時(shí),并顯示出倒計(jì)時(shí)結(jié)果。/*****djs.jsp*****/<%@pageimport="java.text.SimpleDateFo
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年度產(chǎn)品銷售代理合同范本2篇
- 2024年度小程序知識(shí)產(chǎn)權(quán)保護(hù)合同3篇
- GB/T 44909-2024增材制造云服務(wù)平臺(tái)產(chǎn)品數(shù)據(jù)保護(hù)技術(shù)要求
- 2024年度即時(shí)辦理合同履約保函專業(yè)服務(wù)合同3篇
- 2024年度跨境電商代理招商合作合同范本3篇
- 2024制衣廠臨時(shí)工勞動(dòng)合同及崗位技能培訓(xùn)協(xié)議3篇
- 2024年度園林苗圃場(chǎng)地租賃與生態(tài)保護(hù)項(xiàng)目合同3篇
- 2024年地暖安裝與建筑節(jié)能評(píng)估合同范本3篇
- 2024年度藝術(shù)品租賃合同模板及鑒賞指南3篇
- 信陽(yáng)航空職業(yè)學(xué)院《控制工程基礎(chǔ)》2023-2024學(xué)年第一學(xué)期期末試卷
- 醫(yī)美行業(yè)監(jiān)管政策與競(jìng)爭(zhēng)環(huán)境
- 2022-2023學(xué)年北京市豐臺(tái)區(qū)八年級(jí)(上)期末歷史試題(含答案)
- 江蘇省南京市玄武區(qū)2023年數(shù)學(xué)七上期末統(tǒng)考試題含解析
- 生物安全教學(xué)課件
- 《精益生產(chǎn)豐田》課件
- 金礦投資可行性方案
- 裝修工作的進(jìn)度報(bào)告
- 《食品包裝與安全》課件
- 普外科護(hù)士長(zhǎng)述職報(bào)告
- 混凝土組織供應(yīng)運(yùn)輸售后服務(wù)方案
- +山東省泰安市肥城市2023-2024學(xué)年七年級(jí)上學(xué)期期末考試地理試題+
評(píng)論
0/150
提交評(píng)論