기본 js 스톱워치 구현 code_time 및 날짜

html 코드:

코드 복사 코드는 다음과 같습니다.

스타일 유형= "text/css">
#container {
margin-top:10%
width:200px>
#timer {
테두리:빨간색 1px;
높이:76px;
글꼴 크기:32pt; 🎜>}
입력 {
width:87px;
}

>
js 코드:




코드 복사


코드는 다음과 같습니다.

/*
*@author :hyjiacan

*date:15:57 2010-9-5 *name:timer */ var ctrl = document.getElementById("ctrl") / /컨트롤 버튼 객체var 타이머 = document.getElementById("timer"); //시간 표시 객체var 시, 분, 초; //시, 분, 통화 //setTimeout; method

// 디스플레이 및 버튼 초기화

var init = function(){
timer.innerHTML = "00:00:00"; //FF에서는 innerText 사용을 지원하지 않으므로 innerHTML을 사용합니다.
시간 = 분 = 초 = 0; //디스플레이 초기화
ctrl.setAttribute("value", "start"); //컨트롤 버튼 텍스트 초기화
ctrl.setAttribute("onclick", "startit ()"); //제어 버튼 이벤트 초기화
clearTimeout(t);
}
//타이밍 시작
function startit(){
t = setTimeout("startit()" , 1000); //1초(1000밀리초)마다
second 를 재귀적으로 호출합니다.
if(second>=60){ // 초가 60에 도달하는지 확인하고, 그렇다면
second = 0을 전달합니다. ;
분
}
if(분>=60){ //점수가 60에 도달했는지 확인, 그렇다면
분
시간
}
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 Pause = function(){
clearTimeout(t)
ctrl.setAttribute("onclick", "startit()");
ctrl.setAttribute( "value", "continue");
}



재귀 처리에는 setTimeout을 사용하세요. 그 중 매우 중요한 문제가 있는데 바로 지연입니다. 이 접근 방식은 시스템 CPU 리소스와 관련이 많으며 함수 호출에도 시간이 걸리므로 결국 계산 오류가 증가합니다.

또 다른 방법이 있습니다.

시작 버튼을 누를 때 누르는 시간(밀리초)을 기록하고 1초마다 현재 시간을 읽은 후 현재 시간을 사용하여 경과 시간을 계산합니다. 누를 때 기록된 시간을 뺍니다.