Question

我创建了一个在特定时间显示隐藏图像的计时器。因此，从5分钟到230分钟，将显示绿色图像。从230分钟到1分钟，javascript隐藏绿色并显示黄色。从1分钟到30秒，javascript隐藏黄色并显示红色。一旦30秒的标记击中，我希望红色开始闪烁。

这是我的javascript：

var seconds = 300; //Variables for the code below
var countdownTimer;

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 && secondes >= 0) {
        blinkRed();
    }
};

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

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();
};
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 imgBlink = document.getElementById('redStop');

var intval = setInterval(function(){
    if(imgBlink.style.visibility == 'hidden'){
        imgBlink.style.visibility = 'visible';
    } else {
        imgBlink.style.visibility = 'hidden';
    }
} 1000);
};

我不确定我做错了什么。输入上面的setInterval（）后，我的计时器不会显示。我是否需要创建某种循环，将图像在可见和隐藏之间循环。或者上面的setInterval（）函数可以工作。

Answer 1

始终，在can时使用CSS3。更轻，更精简，更多更重要的事情＆amp;

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}

A JSFIDDLE DEMO CAN BE FOUND HERE.

＆安培;另一个fiddle褪色较少。注意间隔。

Answer 2

您setInterval()函数中的毫秒（在1000之前）

之前，您似乎错过了一个逗号

从这个： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

var intervalID = window.setInterval(code, delay);

使图像在可见和隐藏之间来回闪烁（javascript）

2 个答案: