2015-05-15 3 views
0

Так что я создаю таймер в javascript. Он отсчитывает от пяти минут и меняет цвета в определенные промежутки времени. Я создал кнопки, которые запускают время, останавливают время и сбрасывают время. Тем не менее, я заметил, что когда я нажимаю кнопку «Старт» несколько раз, это увеличивает время вычитания. Таким образом, нажмите «=» -1, 2 нажмите = «-2», 3 нажмите = «-3» и т. Д. Я хочу отключить кнопку после ее нажатия. Я выяснил, как отключить его, но как только он отключен, мне нужно снова включить его после нажатия кнопки «Сброс».Как отключить и включить кнопку с Javascript

Поэтому, когда кто-то изначально нажимает кнопку «Пуск», кнопка отключена. Когда пользователь нажимает «Сброс», кнопка «Старт» снова включается. В основном просто нужно выяснить, как вернуть его обратно в исходную функцию.

Вот мой код JavaScript:

var seconds = 300; 
 
var countdownTimer; 
 
var colorChange; 
 
colorChange = ['#7ed473', '#fff194', '#fa8283'] 
 
function secondPassed(){ 
 
\t var minutes = Math.floor(seconds/60); 
 
\t var remainingSeconds = seconds % 60; 
 
\t if (remainingSeconds < 10) { 
 
     remainingSeconds = "0" + remainingSeconds; 
 
    } 
 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
 
    if (seconds == 0) { 
 
\t \t clearInterval(countdownTimer); 
 
\t \t } 
 
} 
 

 
function changeColor(){ 
 
\t if (seconds <= 300 && seconds > 90) { 
 
\t \t document.body.style.background = colorChange[0]; 
 
\t } 
 
\t else if (seconds <= 90 && seconds > 30) { 
 
\t \t document.body.style.background = colorChange[1]; 
 
\t } 
 
\t else if(seconds <= 30 && seconds >= 0){ 
 
\t document.body.style.background = colorChange[2]; 
 
\t } 
 
} 
 
\t 
 
function countdown(start){ 
 
\t secondPassed(); 
 
\t if (seconds != 0) { 
 
\t seconds --; 
 
\t countdownTimer = setTimeout('countdown()', 1000); 
 
\t changeColor(); 
 
\t start.disabled = true; 
 

 
\t } 
 
} 
 

 
function cdpause() { 
 
     // pauses countdown 
 
     clearTimeout(countdownTimer); 
 
}; 
 
    
 
function cdreset(startButton) { 
 
     // resets countdown 
 
     cdpause(); 
 
     secondPassed(); 
 
}; 
 
\t
#countdown { 
 
font-size: 2em; 
 
}
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<link rel="stylesheet" type="text/css" href="newTicket2.0.css"> 
 
<script src = "Timer2.js"> 
 
</script> 
 
</head> 
 

 
<body onload = "cdreset()"> 
 
<span id="countdown" class="timer"></span> 
 

 
<input type="button" value="Start" onclick="countdown(this)"> 
 
<input type="button" value="Stop" onclick="cdpause()"> 
 
<input type="button" value="Reset" onclick="cdreset(seconds = 300)"> 
 
</body> 
 
</html>

Я попытался добавив start.disabled = ложь функции cdreset() в надежде, что это будет просто сбросить кнопку. Но это не сработало. Пробовал поставить обратный отсчет (начало); в cdreset(), и это тоже не сработало. В основном ударил стену. Не может быть так сложно сбросить все. Лол. Любая помощь или руководство будут с благодарностью оценены.

+0

Удалить отключенный атрибут $ ('# start'). RemoveAttr ('disabled'); –

ответ

1

cdreset() не знает, где найти кнопку запуска. Чтобы устранить эту проблему, выполните две незначительные изменения.

Во-первых, добавить идентификатор вашей кнопки запуска:

<input type="button" value="Start" onclick="countdown(this)" id="start"> 

Затем изменить cdreset() использовать этот идентификатор, позволяет кнопку:

function cdreset(startButton) { 
    // resets countdown 
    cdpause(); 
    secondPassed(); 
    document.getElementById('start').disabled = false; 
}; 

Example fiddle

+0

Ничего себе ... это было невероятно просто. лол. Я ценю помощь. –

1

Вы можете присвоить идентификаторы для кнопок и использовать getElementById() для доступа к ним:

var seconds = 300; 
 
var countdownTimer; 
 
var colorChange; 
 
colorChange = ['#7ed473', '#fff194', '#fa8283']; 
 

 
function secondPassed(){ 
 
\t var minutes = Math.floor(seconds/60); 
 
\t var remainingSeconds = seconds % 60; 
 
\t if (remainingSeconds < 10) { 
 
     remainingSeconds = "0" + remainingSeconds; 
 
    } 
 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
 
    if (seconds == 0) { 
 
\t \t clearInterval(countdownTimer); 
 
} 
 
} 
 

 
function changeColor(){ 
 
\t if (seconds <= 300 && seconds > 90) { 
 
\t \t document.body.style.background = colorChange[0]; 
 
\t } 
 
\t else if (seconds <= 90 && seconds > 30) { 
 
\t \t document.body.style.background = colorChange[1]; 
 
\t } 
 
\t else if(seconds <= 30 && seconds >= 0){ 
 
\t document.body.style.background = colorChange[2]; 
 
\t } 
 
} 
 
\t 
 
function countdown(start){ 
 
\t secondPassed(); 
 
\t if (seconds > 0) { 
 
\t  seconds --; 
 
\t  countdownTimer = setTimeout('countdown()', 1000); 
 
\t  changeColor(); 
 
\t  start.disabled = true; 
 
\t } else { 
 
     clearTimeout(countdownTimer); 
 
    } 
 
} 
 

 
function cdpause() { 
 
     // pauses countdown 
 
     clearTimeout(countdownTimer); 
 
} 
 
    
 
function cdreset() { 
 
     // resets countdown 
 
     cdpause(); 
 
     secondPassed(); 
 
     document.getElementById("start").disabled = false; 
 
} 
 
\t
#countdown { 
 
font-size: 2em; 
 
}
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<link rel="stylesheet" type="text/css" href="newTicket2.0.css"> 
 
<script src = "Timer2.js"> 
 
</script> 
 
</head> 
 

 
<body onload = "cdreset()"> 
 
<span id="countdown" class="timer"></span> 
 

 
<input type="button" id="start" value="Start" onclick="countdown(this)"> 
 
<input type="button" id="stop" value="Stop" onclick="cdpause()"> 
 
<input type="button" id="reset" value="Reset" onclick="cdreset(seconds = 300)"> 
 
</body> 
 
</html>

+0

Спасибо, чувак, это действительно помогло, не осознавая, что это было так просто. lol –

+0

Почему вы не приняли этот ответ? – dekkard

0

быстрый поиск Google показывает:

document.getElementById("myBtn").disabled = true; 
+0

Право на, им ужасно в поиске для таких вещей на Google. Я смотрю на жаркую минуту, хотя я это ценю. –

+0

не проблема, я не против людей, ищущих «очевидные» вещи, которые я не собираюсь отправлять 3 миллионам людей, чтобы снизить вас и заставить вас запретить, как и большинство людей здесь, на SO –

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