문자 메시지 케이스를 보내는 카운트 다운

사례 연구 :

① 버튼을 클릭 한 후, 버튼은 진정한 = 장애인을 사용할 수 없습니다;

버튼이 변경됩니다 내부 콘텐츠 ②하면, innerHTML을하여 수정 내용 버튼 유의

③ (초)의 변화, 그래서 타이머를 사용할 필요가있다

④ 내부 타이머의 변수를 정의 감소

⑤ 가변 타이머를 중지 버튼의 초기 상태를 초기화하는데 필요한 시간을 나타내는, 0이면

(1) 첫 번째 단계 : 버튼을 클릭하면, 버튼은 비활성화

<! DOCTYPE HTML> 
<HTML LANG = " EN " > 
<head> 
    <메타 문자 집합 = " UTF-8 " > 
    <제목> 제목 </ 제목> 
</ head> 
<body> 
전화 번호 : <타입의 INPUT은 = " 번호 " > <버튼> 보내기 </ 버튼> 
<스크립트> // true로 장애인을위한 장애인 버튼을 클릭 한 후
     // 내용이 수정 innerHTML을 내부 내용 버튼을 유의 내부의 버튼을 변경 반면
     // 초에 변화가 따라서 타이머 사용해야
     //를 감소, 내부 타이머의 변수를 정의
     // 가변의 시간을 설명하기 위해 0 인 경우에는 타이머를 정지 버튼을 초기 상태로 리셋 할 필요가 VAR의 BTN = 문서.querySelector ( " 버튼 "
    
    ); 
    btn.addEventListener ( ' 클릭 ' , 함수 () { 
        btn.disabled = 참 ; 
    })
 </ script> 
</ body> 
</ HTML>

2. 두 번째 단계는 단어의 내용 안에 버튼 "5,4,3,2,1 초 떠났다."

VAR의 BTN = document.querySelector ( " 버튼 " ); 
btn.addEventListener ( ' 클릭 ' , 기능 () {
     var에 시간 = 5 ; 
    타이머 = setInterval을 (함수 () { 
    btn.disabled = 진정한 ; 
    btn.innerHTML = " 还剩下" + 시간 + " 秒"; 
    으로 .. ; 
  }, 1,000 ) 
})

3 시간 0 초하게 세 번째 단계는, 원래의 상태 버튼 타이머 되돌아 취소

타이머 = 하여 setInterval (함수 () {
   경우 (시각 == 0 ) 
   { 
      위해 clearInterval (타이머) 
      btn.disabled = 거짓 ; 
      btn.innerHTML = " 发送" ;
       시간 = 5; 
    }
    다른 { 
         btn.innerHTML = "还剩下" + 시간 " + "秒" ; 
         으로 .. ; 
    } 
}, 1,000 )

버그 :

시간이 0 일 때 다시 "보내기"버튼을 클릭 할 경우, 원래 상태로 단추를 반환, 당신은 시간을-다시 설정해야하는 "시간 = 5"하지만 0으로 다음 판사 시간에이 코드 줄, 0 후, 자동으로 5에서 카운트 다운을 시작, 클릭 할 필요가 없습니다

원인 : 타이머가 해제되지 않습니다 사항 clearInterval 타이머 (타이머) 잘못, 시간을 썼다. . . . .

문자 메시지 케이스를 보내는 카운트 다운

추천