javascript - JavaScript 计时器的闪烁图像问题

Question

我创建的计时器有问题。我刚刚添加了一个代码片段，该代码片段将导致红色矩形在 30 秒到零秒之间开始在屏幕上闪烁(闪烁)。一旦计时器归零，闪烁就需要停止。计时器只能在 30 秒到 0 秒之间闪烁。由于某种原因，我的blinkRed()函数变得困惑，我不明白为什么。有时它会在该做的时候停下来，有时它会做任何事。

我的代码如下:

var seconds = 20; //Variables for the code below
var countdownTimer;
var imgBlink;

function showGreen() {
	var imgGreen = document.getElementById('greenGo');
	imgGreen.style.visibility = 'visible';
	};
function hideGreen() {
	var imgGreen = document.getElementById('greenGo');
	imgGreen.style.visibility = 'hidden';
};
function showYellow() {
	var imgYellow = document.getElementById('yellowAlmost');
	imgYellow.style.visibility = 'visible';
	};
function hideYellow() {
	var imgYellow = document.getElementById('yellowAlmost');
	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() {
	var imgRed = document.getElementById('redStop');
	imgRed.style.visibility = 'visible';
};
function hideRed() {
	var imgRed = document.getElementById('redStop');
	imgRed.style.visibility = 'hidden';
};

function secondPassed(){
	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)
	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
	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) {
		clearInterval(countdownTimer);//keeps value at zero once it hits zero. 0:00 will not go anymore
		alert("Time is Up, Try again");
		}
};


function changeColor(){ //this changes the background color based on the time that has elapsed
	if (seconds <= 300 && seconds > 150) {  //green between 5:00 - 1:30
		//document.body.style.background = "url("+colorChange[0]+")";
		showGreen();
	}
	else if (seconds <= 150 && seconds > 60) { //yellow between 1:30 - 30
		//document.body.style.background = "url("+colorChange[1]+")";
		hideGreen();
		showYellow();
	}
	else if(seconds <= 60 && seconds > 30){ // red between 30 - 0
		//document.body.style.background = "url("+colorChange[2]+")";
		hideYellow();
		showRed();
	}
	else if (seconds <= 30 && seconds > 0) {
		hideRed();
		blinkRed();
	}
	else if (seconds == 0){
		clearTimeout(imgBlink);
		}
};
	
function countdown(start){ //code for the button. When button is clicked  countdown() calls on secondPassed() to begin count down.
	secondPassed();
	if (seconds != 0) { //actual code to decrement the time
	seconds --;
	countdownTimer = setTimeout('countdown()', 1000);
	changeColor();  //calls the changeColor() function so that background changes
	start.disabled = true; //disables the "start" button after being pressed
	}
	if (start.disabled = true){ //if one of the 'start' buttons are pressed both are disabled
	start2.disabled = true;
	}
	//startDisabled2();
};

function cdpause() { //pauses countdown
        // pauses countdown
        clearTimeout(countdownTimer);
		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
		document.getElementById('start').disabled = false; //Enables the "start" button that has been disabled from countdown(start) function.
		document.getElementById('start2').disabled = false; //enables the 'start2' button. same as above.
		hideGreen();
		hideYellow();
		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);几乎所有我能想到的东西似乎都不起作用。它只是一直滴答作响。

Answer 1

刚刚想通了。我补充道:

imgBlink = setTimeout("blinkRed()", 1000);
	if(seconds == 0){
		clearTimeout(imgBlink);
		}

进入blinkRed()函数，现在它的工作方式就像一个魅力。不过，如果您按两次停止按钮，它会继续滴答作响。但这是一个小问题。

这是更新后的 JavaScript。

var seconds = 20; //Variables for the code below
var countdownTimer;
var imgBlink;

/*function startDisabled2() {
	start2.disabled == true;
	if (start2.disabled == true) {
	start.disabled = true;
	}
};*/
function showGreen() {
	var imgGreen = document.getElementById('greenGo');
	imgGreen.style.visibility = 'visible';
	};
function hideGreen() {
	var imgGreen = document.getElementById('greenGo');
	imgGreen.style.visibility = 'hidden';
};
function showYellow() {
	var imgYellow = document.getElementById('yellowAlmost');
	imgYellow.style.visibility = 'visible';
	};
function hideYellow() {
	var imgYellow = document.getElementById('yellowAlmost');
	imgYellow.style.visibility = 'hidden';
};
function showRed() {
	var imgRed = document.getElementById('redStop');
	imgRed.style.visibility = 'visible';
};
function hideRed() {
	var imgRed = document.getElementById('redStop');
	imgRed.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);
	if(seconds == 0){
		clearTimeout(imgBlink);
		}
};
/*function stopBlinkRed() {
clearInterval(imgBlink);
};*/

function secondPassed(){
	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)
	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
	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) {
		clearInterval(countdownTimer);//keeps value at zero once it hits zero. 0:00 will not go anymore
		alert("Time is Up, Try again");
		}
};


function changeColor(){ //this changes the background color based on the time that has elapsed
	if (seconds <= 300 && seconds > 150) {  //green between 5:00 - 1:30
		//document.body.style.background = "url("+colorChange[0]+")";
		showGreen();
	}
	else if (seconds <= 150 && seconds > 60) { //yellow between 1:30 - 30
		//document.body.style.background = "url("+colorChange[1]+")";
		hideGreen();
		showYellow();
	}
	else if(seconds <= 60 && seconds > 30){ // red between 30 - 0
		//document.body.style.background = "url("+colorChange[2]+")";
		hideYellow();
		showRed();
	}
	else if (seconds <= 30 && seconds > 0) {
		hideRed();
		blinkRed();
	}
	else if (seconds == 0){
		showRed();
		}
};
	
function countdown(start){ //code for the button. When button is clicked  countdown() calls on secondPassed() to begin count down.
	secondPassed();
	if (seconds != 0) { //actual code to decrement the time
	seconds --;
	countdownTimer = setTimeout('countdown()', 1000);
	changeColor();  //calls the changeColor() function so that background changes
	start.disabled = true; //disables the "start" button after being pressed
	}
	if (start.disabled = true){ //if one of the 'start' buttons are pressed both are disabled
	start2.disabled = true;
	}
	//startDisabled2();
};

function cdpause() { //pauses countdown
        // pauses countdown
        clearTimeout(countdownTimer);
		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
		document.getElementById('start').disabled = false; //Enables the "start" button that has been disabled from countdown(start) function.
		document.getElementById('start2').disabled = false; //enables the 'start2' button. same as above.
		hideGreen();
		hideYellow();
		hideRed();
};