이 기사에서는 JavaScript 분 및 두 번째 카운트 다운 타이머의 구현 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
1. 기본 목표
JavaScript에서 1 분 및 두 번째 카운트 다운 타이머를 설계하고 시간이 완료되면 버튼을 불가능 해집니다.
특정 효과는 아래 그림과 같습니다. 문제를 설명하기 위해, 50 밀리 초마다, 즉 0.05마다 테이블을 뛰어 넘기 위해 조정됩니다.
실제로 사용하는 경우 SetInterval ( "Clock.Move ()", 50)를 조정하십시오. Window.onload = function () {...}에서 50에서 1000.
시간이 다가 오기 전에 버튼을 클릭 할 수 있습니다.
시간이 다가 오면 버튼을 클릭 할 수 없습니다.
2. 생산 과정
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 남은 시간 </title>
</head>
<!-HTML 부분은 매우 간단합니다. JavaScript로 제어 해야하는 줄 텍스트 및 제출 버튼은 모두 id->로 작성됩니다.
<body>
남은 시간 : <span id = "타이머"> </span>
<input id = "go"type = "제출"value = "go" />
</body>
</html>
<cript>
/*주요 함수에서 사용하는 기능을 선언*/
var clock = 새 시계 ();
/*타이머에 대한 포인터*/
var 타이머;
Window.onload = function () {
/*기본 함수는 50 초마다 한 번씩 클럭 함수에서 이동 메소드를 호출합니다*/
TIMER = setInterVal ( "clock.move ()", 50);
}
함수 클록 () {
/*s는 clock ()의 변수이며, 남은 초를 나타내는 var가 아닌 전역 변수입니다*/
this.s = 140;
this.move = function () {
/ *출력 전에 Exchange 기능을 호출하여 몇 초에서 분에서 초까지 전환하여 Exchange는 기본 기능 창에서 사용되지 않으므로로드하므로 선언 할 필요가 없습니다 */
document.getElementById ( "타이머"). innerHtml = Exchange (this.s);
/*호출 될 때마다 나머지 초는 그 자체로 줄어 듭니다*/
this.s = this.s-1;
/*시간이 다가 오면 팝업 창이 버튼을 사용할 수 없게 만들고 클럭 함수에서 Move () 호출 중지*/
if (this.s <0) {
경고 ( "시간이 UP");
document.getElementById ( "go"). disabled = true;
클리어 타임 아웃 (타이머);
}
}
}
기능 교환 (시간) {
/*JavaScript의 부서는 플로팅 포인트 부서이며, 수학을 사용하여 정수 부분을 가져와야합니다*/
this.m = math.floor (시간/60);
/*잔류 작업이 있습니다*/
this.s = (시간%60);
this.text = this.m+"minute"+this.s+"second";
/*전달 된 공식 매개 변수 시간에는 이것을 사용하지 말고이 함수에 사용 된 나머지 변수는이 기능을 사용해야합니다.
reture this.text;
}
</스크립트>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.