1
我遇到了我創建的定時器的問題。我剛剛添加了一段代碼，這會導致紅色矩形在屏幕上開始閃爍（閃爍）30秒到零秒。一旦計時器達到零，閃爍需要停止。計時器只應在30秒到0秒之間閃爍。出於某種原因，我的blinkRed（）函數正在失控，我找不出原因。有時它會在其他時候停止運行。javascript定時器的閃爍圖像問題
我的代碼是下面：
var seconds = 20; //Variables for the code below
var countdownTimer;
var imgBlink;
function showGreen() {
\t var imgGreen = document.getElementById('greenGo');
\t imgGreen.style.visibility = 'visible';
\t };
function hideGreen() {
\t var imgGreen = document.getElementById('greenGo');
\t imgGreen.style.visibility = 'hidden';
};
function showYellow() {
\t var imgYellow = document.getElementById('yellowAlmost');
\t imgYellow.style.visibility = 'visible';
\t };
function hideYellow() {
\t var imgYellow = document.getElementById('yellowAlmost');
\t imgYellow.style.visibility = 'hidden';
};
function blinkRed(){
var redBlink = document.getElementById('redStop');
if(redBlink.style.visibility == 'hidden'){
redBlink.style.visibility = 'visible';
} else {
redBlink.style.visibility = 'hidden';
}
imgBlink = setTimeout("blinkRed()", 1000);
};
function showRed() {
\t var imgRed = document.getElementById('redStop');
\t imgRed.style.visibility = 'visible';
};
function hideRed() {
\t var imgRed = document.getElementById('redStop');
\t imgRed.style.visibility = 'hidden';
};
function secondPassed(){
\t var minutes = Math.floor(seconds/60); //takes the output of seconds/60 and makes rounds it down. 4.7 = 4, 3.7 = 3. (to keep the minutes displaying right)
\t var remainingSeconds = seconds % 60; //takes remainder of seconds/60 and displays it. so 270/60 = 4.5 this displays it as 30 so it becomes 4:30 instead of 4.5
\t if (remainingSeconds < 10) { //if remaining seconds are less than 10 add a zero before the number. Displays numbers like 09 08 07 06
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; //displays time in the html page 5:06
document.getElementById('countdown2').innerHTML = minutes + ":" + remainingSeconds; //displays the time a second time
if (seconds == 0) {
\t \t clearInterval(countdownTimer);//keeps value at zero once it hits zero. 0:00 will not go anymore
\t \t alert("Time is Up, Try again");
\t \t }
};
function changeColor(){ //this changes the background color based on the time that has elapsed
\t if (seconds <= 300 && seconds > 150) { //green between 5:00 - 1:30
\t \t //document.body.style.background = "url("+colorChange[0]+")";
\t \t showGreen();
\t }
\t else if (seconds <= 150 && seconds > 60) { //yellow between 1:30 - 30
\t \t //document.body.style.background = "url("+colorChange[1]+")";
\t \t hideGreen();
\t \t showYellow();
\t }
\t else if(seconds <= 60 && seconds > 30){ // red between 30 - 0
\t \t //document.body.style.background = "url("+colorChange[2]+")";
\t \t hideYellow();
\t \t showRed();
\t }
\t else if (seconds <= 30 && seconds > 0) {
\t \t hideRed();
\t \t blinkRed();
\t }
\t else if (seconds == 0){
\t \t clearTimeout(imgBlink);
\t \t }
};
\t
function countdown(start){ //code for the button. When button is clicked countdown() calls on secondPassed() to begin count down.
\t secondPassed();
\t if (seconds != 0) { //actual code to decrement the time
\t seconds --;
\t countdownTimer = setTimeout('countdown()', 1000);
\t changeColor(); //calls the changeColor() function so that background changes
\t start.disabled = true; //disables the "start" button after being pressed
\t }
\t if (start.disabled = true){ //if one of the 'start' buttons are pressed both are disabled
\t start2.disabled = true;
\t }
\t //startDisabled2();
};
function cdpause() { //pauses countdown
// pauses countdown
clearTimeout(countdownTimer);
\t \t clearTimeout(imgBlink);
};
function cdreset() {
// resets countdown
cdpause(); //calls on the pause function to prevent from automatically starting after reset
secondPassed(); //reverts back to original secondPassed() function
\t \t document.getElementById('start').disabled = false; //Enables the "start" button that has been disabled from countdown(start) function.
\t \t document.getElementById('start2').disabled = false; //enables the 'start2' button. same as above.
\t \t hideGreen();
\t \t hideYellow();
\t \t hideRed();
};#countdown{
font-size: 2em;
position: inherit;
left: 120px;
top: 5px;
}
#countdown2{
font-size: 2em;
position: inherit;
left: 120px;
top: 30px;
}
#greenGo{
visibility: hidden;
position: absolute;
bottom: 20px;
z-index: -1;
}
#yellowAlmost{
visibility: hidden;
position: absolute;
bottom: 20px;
z-index: -1;
}
#redStop {
visibility: hidden;
position: absolute;
bottom: 20px;
z-index: -1;
}<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>
<<div id = "timerBackground">
<span id="countdown" class="timer"></span>
<div id = "timerButtons">
<input type="button" value="Start" onclick="countdown(this)" id = "start">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</div>
</div>
<div id = "timerBackground2">
<span id="countdown2" class="timer"></span>
<div id = "timerButtons2">
<input type="button" value="Start" onclick="countdown(this)" id = "start2">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</div>
</div>
<img src = "greenGo.png" id = "greenGo" alt = "greenGo">
<img src = "redStop.png" id = "redStop" alt = "redStop">
<img src = "yellowAlmost.png" id = "yellowAlmost" alt = "yellowAlmost">
</body>
</html>伊夫嘗試添加clearTimeout（imgBlink）;幾乎所有我能想到的事情，似乎沒有任何工作。它只是滴答滴答。
我點擊「運行代碼片斷」按鈕上，它看起來像它的工作原理，你期待？如果我錯了，你能解釋一下嗎？ –
相同！嘗試做一個jsfiddle並嘗試重現問題 –
按下時重置按鈕將重新啓動閃爍的動畫。我最終在幾分鐘之前搞清楚了。我在blinkRed（）函數中添加了一條if語句，現在它可以工作而不會出現毛刺（見下文）。 blinkRed功能將在按下重置或停止兩次後繼續運行。但得到它的位置，非常感謝您的幫助。 –