如何使图像在 Javascript 中闪烁和重叠？

Question

我正在努力让它看起来不错。这个倒计时是为了倒计时，一旦倒计时，我希望骷髅头和交叉骨可见，并且我希望它闪烁。我正在使用这个 Javascript 功能...

var img = document.getElementById('Image1');
var interval = window.setInterval(function() {
    if (img.display == 'hidden'){
        img.style.visibility = 'visible';
    } else {
        img.style.visibility = 'hidden';
    }
}, 1000);

一旦闪烁，如何让它与倒计时重叠span？ http://jsfiddle.net/2Lufxs2t/3/

Answer 1

在 var img = document.getElementById('Image1'); 之后添加 document.getElementById('countdown').style.display='none'; 以隐藏您的计数器。
删除第二个间隔：var interval = window.setInterval(function(){。只需保留切换可见性的 if 即可。问题是 secondPassed() 是每秒运行，然后你的第二个间隔是每秒又是运行。因此，您的内部间隔每秒运行两次并自行切换。

Answer 2

JSFiddle 这对我来说效果很好。

<html>
    <head>
    <title>Countdown</title>
    <script type="text/javascript">
    var seconds = 10;

function stopTimer() {
    clearTimeout(countdownTimer)
}

function floor(x) {
    return x | 0;
}

function pad(n) {
    if (n < 0) {
        n = -n;
    }
    if (n < 10) {
        return '0' + n.toString();
    }
    return n.toString();
}

function secondPassed() {
    var minutes = pad(floor(seconds / 60));
    if (seconds < 0) {
        minutes = '-' + minutes;
    }
    var remainingSeconds = pad(seconds % 60);

    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds > 0) {
        seconds--;
        if (seconds > 8) {
            document.body.style.backgroundColor = "green";
        } else if (seconds == 5) {
            document.body.style.backgroundColor = "yellow";
        } else if (minutes == 0 & seconds == 0) {
            document.body.style.backgroundColor = "red";

            if (seconds%2 == 0) {
            document.getElementById('skull').style.display="none";  
            } 

            if (seconds%2 != 0) {
            document.getElementById('skull').style.display="block";             
            }


        }
    } else {

                if (seconds%2 == 0) {
            document.getElementById('skull').style.display="block";  
            } 

            if (seconds%2 != 0) {
            document.getElementById('skull').style.display="none";              
            }

        seconds--;
    }
}
    </script>
    </head>
    <body>
     <img id="skull" src="http://s15.postimg.org/es5w3xpob/skull.gif"style="position:absolute;  z-index: -1;display:none;">
     <div style=" z-index:10;">
    <p align ="center">
    <span id="countdown" style="color:black; font-size: 450px; font-weight: bold;" ></span>
    </br>
    <button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
    <button onclick="stopTimer()">Stop</button>



        </p>

        </div>
    </body>
    </html>

如何使图像在 Javascript 中闪烁和重叠？

How to make an image to blink and overlap in Javascript?

html

javascript

css