Невозможно найти Javascript Обратный отсчет

Мне нужна помощь в таймере обратного отсчета!Невозможно найти Javascript Обратный отсчет

Пользователь вводит значение в текстовое поле, таймер запускается при нажатии кнопки.

Текст таймера уменьшается на единицу каждую секунду, пока не достигнет нуля.

У меня есть код для первого шага, но, похоже, не получается сделать второй шаг для работы. Я знаю, что он должен включать setTimeout и loop.

Heres код до сих пор:

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

Вы может посмотреть мой исходный код для моего m крайний период обратного отсчета времени PlentyOfTime, если вы хотите: http://derek.genevievehoward.com/projects/4/index.php – howderek

Я не знаю, если это имеет решающее значение, но вы включаете свой .js-файл после вызова editSec – notknown7777

У вас на самом деле есть два элемента кузова, что недействительно! – adeneo

Вы должны использовать setInterval, не SetTimeout. Добавьте этот код в функции OnClick:

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:37:10 PitaJ

Использование setInterval

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

источник

2013-03-04 15:37:44

Вот он идет:

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: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

Невозможно найти Javascript Обратный отсчет

ответ

Смежные вопросы