Question

我遇到了我创建的计时器的问题。我刚刚添加了一个代码片段，它将导致一个红色矩形在30秒和0秒之间开始在屏幕上闪烁（闪烁）。一旦计时器达到零，闪烁就需要停止。定时器应该只在30秒和0秒之间闪烁。由于某种原因，我的blinkRed（）函数正在变得混乱，我无法弄清楚为什么。有时它会停止，因为它应该在其他时候做任何事情。

我的代码如下：

DollarAmount

PoundAmount

Location

我试图添加clearTimeout（imgBlink）;几乎我能想到的一切，似乎没有任何效果。它只是不停地滴答作响。

Answer 1

刚想通了。我补充说：

＆＃13;

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

＆＃13;

进入blinkRed（）函数，现在它就像一个魅力。虽然如果按两次停止按钮，它会继续打勾。但这是一个小问题。

这是更新的javascript。

＆＃13;

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();
};

＆＃13;

为javascript计时器闪烁图像问题

1 个答案: