原生js代碼實作秒表效果

jquery用的多了，逐漸忘記了原生js如何書寫代碼。今天看到一個面試題，利用原生js寫一個計算滑鼠移入某個區域所停留的時長，移出暫停，再次移入累加。

于是想到了，利用原生js實作一個秒表效果。做之前也搜尋了一些秒表效果，是利用settimeout()實作的。本文是利用setinterval()定時器實作的。

html代碼如下：

本文實作計時、暫停、計次和複位效果。

css樣式如下：

如上遍可得到一個簡陋的秒表計時界面和記錄界面。

首先利用js擷取到後面所需的元素：

如上，擷取并定義完所有元素，開始讓秒表計時。

首先定義定時器函數：

讓毫秒動起來，而且遞加到秒。（注：ms為10毫秒）

同理加上如下代碼，即可繼續遞加到分、到小時、到天。。。。

整理後定時器函數完整代碼如下：

if(m>59){m = 0;h++;}

//測試時發現大的機關隻能放在前面，小的放在後面if(s>59){s = 0;m++;}if(ms>99){ms = 0;s++;}hour.innerhtml = h;date.innerhtml = d;min.innerhtml = m;sencond.innerhtml = s;mmss.innerhtml = ms; // 輸出毫秒}

然後定義開始事件：

将函數綁定到開始按鈕：

此時的秒表已經可以走動了，但是有一個問題，當秒表數字小于10 的時候隻有各位，畫面跳動，十分不美觀。是以定義一個函數，用來讓小于10的時候輸出0x；

然後修改定時器函數中的輸出代碼：

這樣秒表就不會頻繁跳動了。

接下來就是暫停事件：

效果為：秒表暫停，暫停按鈕變為繼續按鈕。

然後再添加複位事件：

因為複位按鈕隻有一個作用，是以直接将事件添加在按鈕上。

最後便是重點，将時間記錄下來：

首先要定義li新節點，然後建立文本節點，最後将文本節點添加到定義的li節點上。（目前li為有序清單）

如此一個原生js定時器便完成了。

利用jquery，實作定時器效果，比原生js簡單的多，這裡便不貼上代碼了。

本人是一名初學者，使用了兩個月jquery，原生js就漸漸忘了，剛好看見一個面試題，就自己試了試。希望能有高手多多指點，謝謝大家。