자바 스크립트 카운트 다운을 알아낼 수 없습니다

카운트 다운 타이머를 만드는 데 도움이 필요합니다!자바 스크립트 카운트 다운을 알아낼 수 없습니다

사용자가 텍스트 필드에 값을 입력하면 단추를 클릭 할 때 타이머가 시작됩니다.

타이머 텍스트가 0이 될 때까지 매 초마다 1 씩 감소합니다.

첫 번째 단계는 코드가 있지만 두 번째 단계는 작동하지 않는 것처럼 보입니다. setTimeout 및 루프를 포함해야합니다.

을 Heres 코드 지금까지이 :

당신은 setInterval을을 사용할 필요가

, HTML

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


</head> 
<body> 



<div id="form"> 

<h2> COUNTDOWN</h2> 

    Seconds: <input type="text" name="seconds" id="seconds" /> <input type="button" value="Start!" id="start" /> <input type="button" value="Pause" id="pause" /> 
</div> 


<div id="info"> 


</div> 


<div id="countdown"> 


</div> 

<script src="script.js"></script> 
</body> 
</html>

JAVASCRIPT-

window.onload = function(){ 

var startButton = document.getElementById("start"); 

var form = document.getElementById("seconds"); 

var pause = document.getElementById("pause"); 

var secDiv = document.getElementById("countdown"); 

var editSec = document.createElement("h1"); 


startButton.onclick = function(){ 

editSec.innerHTML = form.value; 
secDiv.appendChild(editSec); 


}; 


};

출처

2013-03-04 user2132308

당신 내 소스 코드를 볼 수있다. 최종 카운트 다운 시간 사이트 PlentyOfTime 원할 경우 : http://derek.genevievehoward.com/projects/4/index.php – howderek

중요한지는 모르겠지만 editSec을 호출 한 후 .js 파일을 포함하게됩니다. – notknown7777

실제로 두 개의 body 요소가 있는데, 이는 유효하지 않습니다! – adeneo

,의 setTimeout 없습니다. 이 여기 간다 setInterval

var time = 100; 
var countdown = function(){ 
    secdiv.innerHTML = time; 
    time--; 
} 
setInterval(countdown,1000);

출처

2013-03-04 15:37:10 PitaJ

사용 : 다음의 onclick 함수에이 코드를 추가하기 원하는 경우

가

var globalTime = form.value; //receive the timer from the form 
var secDiv = document.getElementById("countdown"); 

function decreaseValue() { 
    globalTime = globalTime - 1; 

    secDiv.innerHTML = globalTime; 
} 

startButton.onclick = function(){ 
    setTimeout(decreasValue(),1000); 
}; 

//clear out the timers once completed

출처

2013-03-04 15:37:44

editSec.id = "editSec"; 
window.cdint = setInterval(function(){ 
    var origVal = parseInt(document.getElementById("editSec").innerHTML); 
    document.getElementById("editSec").innerHTML = origVal - 1; 
    if(origVal - 1 <= 0){ 
     window.cdint = clearInterval(window.cdint); 
    } 
}, 1000);

출처

2013-03-04 15:40:56 Aravind

당신은 setTimeout를 사용할 수 있습니다

startButton.onclick = function() { 
    var value = parseInt(form.value); 
    editSec.innerHTML = value; 
    secDiv.appendChild(editSec); 
    setTimeout(function() { 
     editSec.innerHTML = --value < 10 
      ? '<span style="color:red">' + value + '</span>' 
      : value; 
     if (value) { 
      setTimeout(arguments.callee, 1000); 
     } 
    }, 1000); 
};

출처

2013-03-04 15:51:33 leaf

if 문을 추가하여 10보다 작은 숫자를 빨간색으로 변경하려면 어디에 추가해야합니까? – user2132308

업데이트 된 답변보기 (테스트되지 않음). – leaf

자바 스크립트 카운트 다운을 알아낼 수 없습니다

답변

관련 문제