最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

原生js秒表實現(xiàn)代碼_時間日期

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:03:41
文檔

原生js秒表實現(xiàn)代碼_時間日期

原生js秒表實現(xiàn)代碼_時間日期:html代碼: 代碼如下: #container { margin:0 auto; margin-top:10%; width:200px; } #timer { border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color
推薦度:
導(dǎo)讀原生js秒表實現(xiàn)代碼_時間日期:html代碼: 代碼如下: #container { margin:0 auto; margin-top:10%; width:200px; } #timer { border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color

html代碼:
代碼如下:















js代碼:
代碼如下:
/*
*@author:hyjiacan
*date:15:57 2010-9-5
*name:timer
*/
var ctrl = document.getElementById("ctrl"); //控制按鈕對象
var timer = document.getElementById("timer"); //時間顯示對象
var hour, minute, second; //時,分 ,鈔
var t; //setTimeout方法
//初始化顯示和按鈕
var init = function(){
timer.innerHTML = "00:00:00"; //由于FF不支持使用innerText,故采用innerHTML
hour = minute = second = 0; //初始化顯示
ctrl.setAttribute("value", "開始"); //初始化控制按鈕文字
ctrl.setAttribute("onclick", "startit()"); //初始化控制按鈕事件
clearTimeout(t);
}
//開始計時
function startit(){
t = setTimeout("startit()", 1000); //每隔1秒(1000毫秒)遞歸調(diào)用一次
second++;
if(second>=60){ //判斷秒是否到60, 是則進位
second = 0;
minute++;
}
if(minute>=60){ //判斷分是否到60, 是則進位
minute = 0;
hour++;
}
timer.innerHTML = j(hour) + ":" + j(minute) + ":" + j(second) ; //更新顯示
//更改按鈕狀態(tài)
ctrl.setAttribute("value", "暫停/停止"); //更改按鈕文字
ctrl.setAttribute("onclick", "pause()"); //更改按鈕觸發(fā)事件
}
//顯示數(shù)字填補,即當(dāng)顯示的值為0-9時,在前面填補0;如:1:0:4, 則填補成為 01:00:04
var j = function(arg){
return arg>=10 ? arg : "0" + arg;
}
//暫停計時
var pause = function(){
clearTimeout(t);
ctrl.setAttribute("onclick", "startit()");
ctrl.setAttribute("value", "繼續(xù)");
}

使用setTimeout遞歸處理。 在這之中,有一個很重要的問題——延遲,這樣的做法和系統(tǒng)CPU資源有很大關(guān)系,而且函數(shù)的調(diào)用也要耗費時間,最終就導(dǎo)致計數(shù)的誤差越來越大。

還有另一個方法:

在按下開始按鈕的時候,記錄下按下的時間(毫秒),然后每隔1秒讀取一次當(dāng)前時間,再用當(dāng)前時間減去按下時記下的時間,算出經(jīng)過了的時間。

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

原生js秒表實現(xiàn)代碼_時間日期

原生js秒表實現(xiàn)代碼_時間日期:html代碼: 代碼如下: #container { margin:0 auto; margin-top:10%; width:200px; } #timer { border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color
推薦度:
標(biāo)簽: 時間日期 時間 計時器
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top