JS는 스톱워치 타이머 일시 정지 효과를 구현합니다(자세한 그래픽 설명).

JavaScript는 프론트 엔드 개발에 필수적인 부분입니다. JS 없이는 많은 효과를 얻을 수 없습니다. JavaScript를 배우고 있는 친구들, JS를 사용하여 스톱워치 타이머를 만들 수 있나요? 이 기사에서는 JS를 사용하여 스톱워치 타이머 효과를 얻는 방법과 버튼을 클릭하여 타이밍을 중지하는 방법에 대해 설명합니다. 마지막으로 관심 있는 친구들이 참조할 수 있도록 JS 스톱워치 타이머의 코드를 공유하겠습니다.

JS로 스톱워치 타이머를 작성하려면 클릭 이벤트, 함수, if 함수 등과 같은 많은 JavaScript 지식이 필요합니다. 확실하지 않은 경우 PHP 중국어 웹사이트의 관련 기사를 참조하거나 JavaScript를 방문하세요. 영상튜토리얼, 기본을 잘 익혀야해요!

자세한 예: JavaScript로 스톱워치 타이머를 만드는 방법, 버튼을 클릭하여 타이머를 중지할 수 있습니다.

HTML 부분:

양식에서 입력을 사용하여 타이밍 시작 버튼(타이밍을 시작하려면 버튼 클릭, 시간은 초 단위), 중지 버튼(타이밍을 중지하려면 클릭) 및 텍스트 상자(사용됨)를 만듭니다. 시간을 표시하기 위해), 구체적인 코드는 다음과 같습니다:

<form>
   <input type="button" value="开始计时!" onclick="start()" />
   <input type="text" id="txt" />
   <input type="button" value="停止!" onclick="stop()" />
</form>
<p>单击开始计时按钮，输入框将从0开始一直计时。以秒计算</p>
<p>单击停止按钮，停止计时，再次点击开始按钮，又再次开始计时。</p>

JavaScript 부분:

페이지가 설정되었습니다. 다음으로 JavaScript를 사용하여 효과를 얻습니다. 시작 버튼과 중지 버튼에 각각 클릭 이벤트를 제공합니다. 클릭이 중지되면 타이밍이 일시 중지됩니다(중지 후 시간이 재설정되지 않음). 타이밍 단위를 초로 설정하려면 다음과 같습니다.

var c=0;
  var t;
  var timer_is_on=0;
  function timedCount(){
   document.getElementById('txt').value=c;
   c=c+1;
   t=setTimeout(function(){timedCount()},1000);
  }
  function start(){
   if (!timer_is_on){
    timer_is_on=1;
    timedCount();
   }
  }
  function stop(){
   clearTimeout(t);
   timer_is_on=0;
  }

Rendering:

위 그림에는 JavaScript 스톱워치 타이머의 효과가 표시되어 있습니다. 위의 사진은 한 장만 찍은 것입니다. 튜토리얼에서 더 자세한 내용을 확인할 수 있습니다. 그리고 그것이 당신에게 도움이 되기를 바랍니다!

더 많은 관련 튜토리얼을 보려면

JavaScript 중국어 참조 매뉴얼을 방문하세요.

위 내용은 JS는 스톱워치 타이머 일시 정지 효과를 구현합니다(자세한 그래픽 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!