javascript計時器編寫過程與實現(xiàn)方法
JavaScript是一門非常容易上手的腳本語言，而且工具繁多，功能強大，因為一直做后端的關(guān)系，筆者目前也只是略學(xué)一點皮毛。
接下來進入正題——計時器。先談下計時器的功能:
1.計時器要能夠在頁面上顯示時間
2.每秒鐘計時器刷新，秒每滿60進分鐘1，分鐘每滿60進小時1
3.計時器需要能夠重置，也就是重新計時
4.計時結(jié)束時，需要能夠有獲取計時時間的方法
以上功能很簡單，計時還應(yīng)該有暫停、繼續(xù)計時等功能，沒關(guān)系，我們一個一個來。
第一步：
我們做一個簡單的頁面，要有一個現(xiàn)實時間的標簽，要有開始、暫停倆按鈕，頁面繪制如下：
不要為一個頁面花太多時間哦，這只是幫助你寫寫第一段代碼練練手~
第二步：
我們分析下計時器需要哪些屬性：
1.計時，需要開始時間
2.結(jié)束時間
3.總共走了多長時間，這個屬性是要返回給使用者的
4.展示器，其實就是個jquery對象或者dom對象啦，計時是要在一個地方展示的嘛
5.展示時間需要進行拆解，于是我們有小時屬性
6.分鐘屬性
7.秒屬性（其實被總時間囊括了，先記上，萬一用得到呢）
我們看下代碼：
var startTime;//開始時間
var endTime;//結(jié)束時間
var timeLength;//總時長
var timeSpan;//計時器走過的時間
var displayer;//時間顯示器
var hh=0;//小時
var mm=0;//分鐘
var status=0;//計時狀態(tài)
乍一看好像多了幾個屬性，因為計時會用到JavaScript的setTimeout方法，該方法會返回一個對象，我們可以利用此對象將setTimeout清除（clearTimeout）;
第三步：
我們分析下計時器需要哪些方法：
1.計時器需要啟動，于是我們有開始方法
2.計時器需要停止，于是我們有停止方法，停止后應(yīng)該告訴使用者計了多長時間，于是應(yīng)該返回時長
3.計時器還應(yīng)該有個暫停功能，暫停后，可以在暫停的位置上再次開始計時，暫停也應(yīng)該返回時長
4.圍繞啟動停止，還應(yīng)該有每秒鐘計時器的內(nèi)心活動，類似一個委托方法，美秒執(zhí)行一次
5.呈現(xiàn)邏輯，我們要講真正的時間顯示給頁面上的展示器，并且做一些可讀性更好的格式轉(zhuǎn)換
上代碼，構(gòu)造函數(shù)：
function createTimer(_startTime,_endTime,_timeLength,_displayer){
startTime=_startTime;//開始時間
endTime=_endTime;//結(jié)束時間
timeLength=_timeLength;//總時長
displayer=_displayer;//時間顯示器
hh=0;//小時
mm=0;//分鐘
status=0;//計時狀態(tài)
}
計時器開始：
var start =function(){
hh = 0;
mm = 0;
startTime=new Date();
status = setTimeout(beat, 1000);
}
計時結(jié)束：
var stop=function(){
clearTimeout(status);
endTime=new Date();
timeLength=parseInt((endTime-startTime)/1000);
alert(timeLength);
}
每秒鐘計時器的內(nèi)心活動：
var beat=function(){
endTime = new Date();
timeSpan = parseInt((endTime - startTime)/1000);
displayer[0].innerHTML = checkTime(timeSpan);
status = setTimeout(beat, 1000);
}
為了能夠展現(xiàn)上圖的00:00:00,我們需要一段呈現(xiàn)邏輯
var checkTime=function(len){
len=len-mm*60;
if (len >= 60) {
this.mm++;
//starttime1 = new Date();
len = 0;
}
mm=mm-hh*60;
if (mm >= 60) {
hh++;
mm = 0;
}
return j(self.hh) + ":" +j(mm) + ":" + j(len);
}
var j=function(arg){
return arg >= 10 ? arg : "0" + arg;
}
我們啟動計時器，這個簡單的計時器就開始跑了^_^
是不是少了點什么：計時器哪能沒有暫停呀，筆者那會構(gòu)思這些的時候，也沒想到暫停功能，正看著它一秒一秒跳動著，傻樂呢，直到業(yè)務(wù)需要，才想起來，得加上這功能。
沒關(guān)系，我們繼續(xù)設(shè)計，demo頁上添加一個暫停按鈕:P
先分析下：
1.暫停后，肯定要在上次暫停的節(jié)點上重新開始，這塊功能我們做在開始按鈕里，于是我們需要一個標識位，來判斷是重新開始，還是暫停后開始
2.我們需要記錄暫停的時間點
3.暫停的時間間隔最好也能記下來，能用得到，不然再次開始的時候，時間在呈現(xiàn)上會立刻跳到間隔之后（比如暫停時是00:00:09，暫停一分鐘后，如果不作調(diào)整直接開始，時間會變成00:01:09）
于是我們添加三個屬性：
var isParse=false;//是否為暫停
var parseTime;//暫停時間點
var intervalTime = 0;//暫停時間間隔
暫停方法：
var parse=function(){
parseTime = new Date();
isParse = true;
clearTimeout(status);
}
重寫開始方法和呈現(xiàn)方法：
var start =function(){
if(!isParse){
startTime=new Date();
startTime1=startTime;
hh = 0;
mm = 0;
startTime=new Date();
status = setTimeout(beat, 1000);
}
else{
intervalTime=parseInt((intervalTime + (new Date() - parseTime) / 1000));
starttime1 = startTime;
status = setTimeout(beat, 1000);
}
}
var checkTime=function(len){
len=len-mm*60-intervalTime;
if (len >= 60) {
mm++;
len = 0;
}
mm=mm-hh*60;
if (mm >= 60) {
hh++;
mm = 0;
}
return j(hh) + ":" +j(mm) + ":" + j(len);
}
以上，搞定，我們的計時器擁有了暫停功能~
看下代碼全覽，核心代碼不到一百行。
寫到這里，主要工作就做完啦，其實還可以進行封裝，利用prototype，將方法全部附到一個對象里，當(dāng)實例化一個timer對象并初始化一些關(guān)鍵屬性后，這些方法都可以被對象調(diào)用。這里就不贅述了，感興趣的童鞋可以試試~
相關(guān)文章
JavaScript flash復(fù)制庫類 Zero Clipboard
開發(fā)中經(jīng)常會用到復(fù)制的功能，在 IE 下實現(xiàn)比較簡單。但要想做到跨瀏覽器比較困難了。2011-01-01
在寫項目時候需要在表單里面加一個picker選擇器,但選擇input的時候軟鍵盤與選擇器會同時彈出,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序點擊輸入框時阻止彈出軟鍵盤的幾種解決方案,需要的朋友可以參考下2024-02-02
javascript基礎(chǔ)進階_深入剖析執(zhí)行環(huán)境及作用域鏈
下面小編就為大家?guī)硪黄猨avascript基礎(chǔ)進階_深入剖析執(zhí)行環(huán)境及作用域鏈。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
js仿土豆網(wǎng)帶縮略圖的焦點圖片切換效果實現(xiàn)方法
這篇文章主要介紹了js仿土豆網(wǎng)帶縮略圖的焦點圖片切換效果實現(xiàn)方法,涉及javascript操作圖片特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS對象深度克隆,結(jié)合實例形式分析了JavaScript對象深度克隆的實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2017-03-03
項目中常遇到輸入框檢查的需求，比如即時搜索，用change事件？change事件失去焦點才發(fā)生，無法做到即時。keypresss事件？能監(jiān)聽到鍵盤，但監(jiān)聽不到鼠標復(fù)制粘貼，不完美2014-09-09
我們在日常生活中無論是坐公交還是點餐,都會接觸各種各樣的小程序,下面這篇文章主要給大家介紹了關(guān)于小程序中權(quán)限設(shè)計的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
js中的關(guān)聯(lián)數(shù)組與普通數(shù)組詳解
下面小編就為大家?guī)硪黄猨s中的關(guān)聯(lián)數(shù)組與普通數(shù)組詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript懶加載與預(yù)加載原理與實現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)彈出層禁止頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07