javascript_javascript 기술로 타이머를 구현하는 간단한 방법-JS 튜토리얼-php.cn

javascript_javascript 기술로 타이머를 구현하는 간단한 방법

WBOY

풀어 주다： 2016-05-16 15:14:30

원래의

1161명이 탐색했습니다.

타이머는 운동, 달리기 대회, 기타 관련 활동 등 생활에서 자주 사용되는 기능이기도 합니다.

타이머는 주로 시간의 논리적 처리입니다. 예를 들어 60초는 1분과 같고 여기서는 시간만 처리하므로 동적으로 표시됩니다. 내부 입력에서.

이제 이 인터페이스를 완성해 보겠습니다

<label>计时:</label> 
<input type="text" name="" id="timer"/> 
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>

로그인 후 복사

레이블 요소에 ID를 부여하는 목적은 레이블을 얻은 다음 두 개의 클릭 이벤트, 카운터에 대한 일시 중지 이벤트 및 다시 시작 이벤트를 추가하는 것입니다.

먼저 timing을 시작하는 과정을 마치겠습니다. timing을 시작하려면 주로 1초마다 메소드를 실행하는 setInterval 메소드를 사용하므로 처음에 언급한 대로 60초의 시간을 처리할 수 있습니다. 는 1분...이므로 판단을 통해 처리해야 하며, 최종적으로 얻은 초, 분, 시간을 입력 상자에 표시합니다.

var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时

//60秒 === 1分
//60分 === 1小时
function timer() {
 return setInterval(function () {

  var str_sec = n_sec;
  var str_min = n_min;
  var str_hour = n_hour;
  if ( n_sec < 10) {
   str_sec = "0" + n_sec;
  }
  if ( n_min < 10 ) {
   str_min = "0" + n_min;
  }

  if ( n_hour < 10 ) {
   str_hour = "0" + n_hour;
  }

  var time = str_hour + ":" + str_min + ":" + str_sec;
  ele_timer.value = time;
  n_sec++;
  if (n_sec > 59){
   n_sec = 0;
   n_min++;
  }
  if (n_min > 59) {
   n_sec = 0;
   n_hour++;
  }


 }, 1000);
}

var n_timer = timer();

로그인 후 복사

나중에 처리를 일시 중지하고 다시 시작하기 위해 타이머 메서드를 사용하여 setInterval 메서드를 래핑합니다.
사용자가 일시 정지를 클릭하면 타이머가 타이밍을 중지합니다. 따라서 타이머는 타이밍을 계속 유지하므로 이 상태에 대해 < 속성을 지정합니다. 🎜>

//暂停和继续
function pause(self) {
  var state = self.getAttribute("state");
  if (state === "on") {
   clearInterval(n_timer);
   self.textContent = "继续";
   self.setAttribute("state", "off");
  } else {
   n_timer = timer();
   self.textContent = "暂停";
   self.setAttribute("state", "on");
  }
}

로그인 후 복사

마지막으로 다시 시작하는 방법을 살펴보겠습니다. 카운터를 0으로 지우고 일시정지 버튼의 초기 상태를 변경하는 것이 더 간단합니다.

function restart() {
 clearInterval(n_timer);
 n_sec = 0;
 n_min = 0;
 n_hour = 0;
 n_timer = timer();

 var ele_pause = document.getElementById("pause");
 ele_pause.textContent = "暂停";
 ele_pause.setAttribute("state", "on");
}

로그인 후 복사

이렇게 하면 타이밍 기능이 완성됩니다.

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.