HTML을 사용하여 타이머를 설정하는 방법

HTML을 사용하여 타이머를 설정하는 방법: 먼저 새 HTML 페이지를 만들고 버튼을 설정한 다음 버튼에 함수를 바인딩한 다음 타이머를 저장하는 변수를 설정합니다.

이 문서의 운영 환경: windows7 시스템, html5&&javascript 버전 1.8.5, Dell G3 컴퓨터.

새 HTML 페이지를 만든 다음 버튼을 설정하고 이 버튼에 기능을 바인딩하세요. 예를 들어 기능 타이머를 설정합니다.

지금 해야 할 일은 카운트다운 타이머입니다. 카운트다운 시간이 5초라고 가정하면 초를 저장하기 위한 변수를 설정해야 합니다. 그리고 버튼 요소도 가져와야 합니다.

그림과 같이 타이머를 저장할 변수를 설정해 주세요. setInterval은 타이머 함수입니다. 첫 번째는 함수이고 두 번째는 시간입니다. 여기서는 1000밀리초마다 호출되도록 설정했습니다.

그런 다음 함수에 코드 작성을 시작하세요. 먼저 s가 0보다 작은지 확인하세요. 내가 만든 타이머는 5초부터 카운트다운을 시작하므로 음수가 표시됩니다. 0보다 작은지 판단해야 합니다. 0보다 작은 경우 타이머를 지우고 버튼의 내용을 수정한 후 버튼을 사용할 수 있게 만듭니다.

0보다 작지 않다면 버튼의 내용을 수정하고 시간에서 1을 뺀 후 버튼을 사용할 수 없게 만듭니다.

카운트다운 타이머가 완료된 후 초기 효과는 그림과 같습니다. 이때 버튼의 색상은 상대적으로 밝아 버튼을 클릭할 수 있음을 나타내며 내부의 텍스트는 "보내기"입니다. .

버튼을 클릭하면 5초 카운트다운이 시작되는데 이때 버튼 텍스트가 변경되어 버튼을 클릭할 수 없는 상태가 됩니다. 카운트다운이 끝나면 버튼이 6단계로 변경됩니다. 다시 클릭하면 다시 순환됩니다.

추천: "js 기본 튜토리얼" "HTML 비디오 튜토리얼"

위 내용은 HTML을 사용하여 타이머를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!