ネイティブ JS ストップウォッチの実装コード_時刻と日付

HTML コード:

コードをコピー コードは次のとおりです。

style type= "text/css">
margin:0 auto;
width:200px; {
ボーダー:赤 1px;
高さ:76px;
フォントサイズ:32pt; 🎜>}
input {
width:87px;

js コード:




コードをコピー


コードは次のとおりです:


/*

*@author :hyjiacan
*date:15:57 2010-9-5
*name:timer

*/ var ctrl = document.getElementById("ctrl") / /コントロールボタンオブジェクトvar timer = document.getElementById("timer"); //時間表示オブジェクトvar 時、分、通貨var t; Method// 表示とボタンの初期化 var init = function(){

timer.innerHTML = "00:00:00"; //FF は innerText の使用をサポートしていないため、innerHTML を使用します。

時 = 分 = 秒 = 0; //表示を初期化します
ctrl.setAttribute("value", "start"); //コントロールボタンのテキストを初期化します
ctrl.setAttribute("onclick", "startit) ()"); //コントロールボタンの初期化event
clearTimeout(t);
}
//開始タイミング
function startit(){
t = setTimeout("startit()" , 1000); // 1 秒ごと (1000 ミリ秒) を再帰的に呼び出します。
if(秒>=60){ // 秒が 60 に達したかどうかを判断し、到達した場合は
秒 = 0 を実行します。 ;
分 ;
}
if(分>=60){ //スコアが 60 に到達したかどうかを判断し、到達した場合は
分 = 0 を実行します。
timer.innerHTML = j(時) ":" j(分) ":" j(秒) ; //表示を更新
//ボタンのステータスを変更
ctrl.setAttribute("value", " Pause/Stop"); //ボタンのテキストを変更します
ctrl.setAttribute("onclick", "pause()"); //ボタンのトリガーイベントを変更します
}
//数字のパディングを表示します表示される値が 0 ～ 9 の場合、前に 0 を入力します。例: 1:0:4、次に 01:00:04 を入力します。
var j = function(arg){
return arg> =10 ? arg : "0" arg;
}
//一時停止タイミング
var stop = function(){
clearTimeout(t);
ctrl.setAttribute("onclick") "startit()");
ctrl.setAttribute( "value", " continue");
}



再帰的な処理には setTimeout を使用します。 その中には、遅延という非常に重要な問題があります。このアプローチはシステムの CPU リソースに大きく関係しており、関数の呼び出しにも時間がかかり、最終的にはカウントエラーの増加につながります。

別の方法もあります。

スタートボタンを押したときに、押した時間（ミリ秒）を記録し、1秒ごとに現在時刻を読み取り、その現在の時間を使用して経過時間を計算します。を押したときに記録された時間を減算します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。