자바 스크립트를 사용하여 타이머를 작성하여 자바 스크립트 실행시 시간을 표시하는 div 요소를 생성하는 방법

초 초 입력시 초를 감소시키는이 타이머 웹 페이지를 만들려고했습니다. 먼저 h2 요소를 생성 한 다음 입력 된 초기 값을 출력하는 함수를 실행하고 있습니다. 그런 다음 setInterval을 사용하여 h2 요소의 값을 1 씩 줄이면서 0에 도달 할 때까지 함수를 실행합니다. 0에 도달하면 clearInterval을 사용하여 종료합니다. 어떤 이유로 인해 실행하는 데 너무 오래 걸리고 화면에 아무 것도 출력하지 않고 웹 페이지가 충돌합니다. 나는 실행이 너무 오래 걸리는 곳을 이해하지 못한다. 제발 나를 도와주세요. 다른 방법으로이 작업을 수행 할 수 있습니까? 여기에 조건이 1 초 동안 동일한 체재 할 때 while 사이클의 새로운 구간을 추가 할 때 문제가 있었다자바 스크립트를 사용하여 타이머를 작성하여 자바 스크립트 실행시 시간을 표시하는 div 요소를 생성하는 방법

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>TIMER</title> 
</head> 
<body> 
    <label>Enter the number of seconds for the timer <input id='initial' type="text"> 
    </label> <br> 

    Press the button to start the timer <br> 
    <button id="start_timer">Timer</button> <br><br> 

    <script type="text/javascript"> 
     var timerValue=document.getElementById('initial'); 
     var buttonEl=document.getElementById("start_timer"); 

     function reduceTime(){ 
      countDown.textContent=parseFloat(countDown.textContent)-1; 
     } 

     function initial(){ 
      countDown=document.createElement('h2') 
      countDown.textContent=timerValue.value; 
      while(parseFloat(countDown.textContent)>0){ 
       timer=window.setInterval(reduceTime,1000); 
      } 
      if(parseFloat(countDown.textContent)===0){ 
       window.clearInterval(timer); 
      } 
     } 
     buttonEl.addEventListener('click',initial); 
    </script> 
</body> 
</html>

출처

2017-12-25 Aditya Vinod Kumar

코드 -에게 있습니다. 또한 변수 countDown을 사용하지 않았습니다.

var timerValue=document.getElementById('initial'); 
 
var buttonEl=document.getElementById("start_timer"); 
 
var countDown = document.getElementById("countDown"); 
 
var timer; 
 

 
function reduceTime(){ 
 
    var time = parseFloat(countDown.textContent)-1; 
 
    if (time < 0) { 
 
     clearInterval (timer); 
 
     return; 
 
    } 
 
    countDown.textContent=time; 
 
} 
 

 
function initial(){ 
 
    countDown.textContent=timerValue.value; 
 
    timer = window.setInterval(reduceTime,1000); 
 
} 
 
buttonEl.addEventListener('click',initial);

<label> 
 
    Enter the number of seconds for the timer <input id='initial' type="text"> 
 
</label> 
 
<br /> 
 

 
Press the button to start the timer <br> 
 
<button id="start_timer">Timer</button> <br><br> 
 
\t 
 
<p> 
 
    <h2 id="countDown"></h2> 
 
</p>

출처

2017-12-25 06:04:30

이 방법을 이해하지만 특별히 document.createElement ("h2")를 사용하여 버튼을 클릭 할 때 h2 요소를 만들고 싶습니다. –

setInterval에 대한 while 루프의 DOM에 새 h2 요소를 추가 reduceTime()에 clearInterval에 대한 테스트를 이동 및 제거 :

var timerValue = document.getElementById('initial'); 
 
var buttonEl = document.getElementById("start_timer"); 
 

 
function reduceTime() { 
 
    if (parseFloat(countDown.textContent) === 0) { 
 
    window.clearInterval(timer); 
 
    } else { 
 
    countDown.textContent = parseFloat(countDown.textContent) - 1; 
 
    } 
 
} 
 

 
function initial() { 
 
    countDown = document.createElement('h2'); 
 
    document.body.appendChild(countDown) 
 
    countDown.textContent = timerValue.value; 
 
    timer = window.setInterval(reduceTime, 1000); 
 

 
} 
 
buttonEl.addEventListener('click', initial);

<label>Enter the number of seconds for the timer <input id='initial' type="text"> 
 
    </label> <br> Press the button to start the timer <br> 
 
<button id="start_timer">Timer</button>

다음은 수정입니다

출처

2017-12-25 06:05:02 SLePort

감사합니다. appendChild()를 사용하여 자식을 추가해야합니까? 왜 그것으로 작동하지 않을까요? –

새로운 요소는'createElement'로 생성 될뿐만 아니라'appendChild' 또는'insertBefore' 메소드로 dom에 삽입 (또는 추가)되어야합니다. – SLePort

감사합니다. @SLePort –

자바 스크립트를 사용하여 타이머를 작성하여 자바 스크립트 실행시 시간을 표시하는 div 요소를 생성하는 방법

답변

관련 문제