Question

我在使用Skull and crossbones重叠倒计时和按钮时遇到问题。 z-index:似乎不起作用。（我没有发布图像的声誉。）

我希望倒计时结束时图片可见，并且每隔一秒闪烁一次。

我怎样才能让骷髅和交叉骨重叠呢？

jsfiddle.net/2Lufxs2t

<html xmlns="http://www.w3.org/1999/xhtml" >
    <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";}
    }
    else{
    seconds--;

        //if (seconds == 0 || seconds == 2 || seconds == 4 || seconds == 6 || seconds == 8 ) {document.getElementById("Image1").style.visibility= "visible";}
        //else {document.getElementById("Image1").style.visibility= "hidden";}
    }
}
    </script>
    </head>
    <body onload = "getSeconds()">
    <div ="wrapper">
    <span id="countdown" style="color:black; font-size: 500px; font-weight: bold"></span>

    <button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
    <button onclick="stopTimer()">Stop</button>

            <asp:Image ID="Image1" runat="server"  ImageUrl="\\scnas1\dev\vbdev\Time\skull.gif"
             />&nbsp;
    </div>
    </body>
    </html>

#Image1 
{
    z-index:0;
    position: absolute;
    top:0;
    left:0;
}
#countdown
{
    z-index:-1;
}

Answer 1

不是100％肯定你的目标。

但我提供了一个例子，说明我认为你可能会在

之后

var startBtn       = document.getElementById('start'),
    stopBtn        = document.getElementById('stop'),
    timerEl        = document.getElementById('timer'),
    secondsPassed  = 0,
    secondsTimer   = null,
    updateLabel    = setInterval(function() {
        timerEl.innerHTML = secondsPassed + ' seconds'; //update the view every 1 second with the seconds passed.

        var color = 'green';
    
        if( secondsPassed >= 10 ){
            color = 'yellow';
        }
        if( secondsPassed >= 20 ){
            color = 'red';
        }
    
        document.body.style.backgroundColor = color;

    }, 1000);

startBtn.addEventListener('click', function() {
  
  clearInterval(secondsTimer); //incase its double clicked
  secondsPassed = 0; //remove this line if you dont want it to reset
  
  secondsTimer = setInterval(function() {
    secondsPassed++; //every 1 second we increase the second count
  }, 1000);
  
});

stopBtn.addEventListener('click', function() {
  clearInterval(secondsTimer); //when its clicked we just stop the timer
});

.wrapper {
  position: relative;
  margin-bottom: 20px;
}
.wrapper img {
  display: block;
  max-height: 200px;
}
.wrapper span {
  display: inline-block;
  position: absolute;
  top: 45%;
  left: 25%;
  color: red;
  background: white;
}

<div class="wrapper">
  <img id="Image1" src="http://s15.postimg.org/es5w3xpob/skull.gif" />
  <span id="timer"></span>
</div>

<button id="start">start</button>
<button id="stop">stop</button>

Answer 2

如果您希望图像覆盖按钮，未来的解决方案是使用CSS属性pointer-events: none，但它仍然是经验性的，并且看起来是CSS 4的一部分。仅当它在您喜欢的浏览器中工作时才使用，这很好足够。另请参阅MDN和SO Pass mouse events through absolutely-positioned element

另一个解决方案是捕获包装器容器上的事件，然后在代码中决定是否在启动或停止按钮上发生了单击事件，如果是这样，则调用适当的处理函数。难以让浏览器以正常方式响应针对按钮的鼠标悬停/退出事件，但该方法已被使用。

以下示例中显示的另一个解决方案是在堆叠上下文中使用三个层。在底层放置按钮和倒计时元素。将sc和十字骨放置在中间层上，并将位于底层的按钮的标签放在顶层上。这些顶级label元素将鼠标事件（将复制）发送到真实按钮，而无需此操作的其他脚本。标签是隐藏的，需要仔细确定尺寸和放置。

在当前版本的Firefox和IE中工作：

<!DOCTYPE html><html><head><title>skull blink</title><meta charset="utf-8">
<style type="text/css">

.centerText
{    text-align: center;
}
#countdown
{   display: inline-block;
    height: 60px;
    width: 350px;
    color:black;
    font-size: 50px;
    font-weight: bold;
    transition: opacity 0.9s;
}
#countFill /* same size as #countdown */
{   display: inline-block;
    height: 60px;
    width: 350px;
}

div#z0 /*  parent node of #z10 and #z20  */
{   display: inline-block;
}
div#z10
{  display: inline-block;
   position: absolute;
   width: 350px;
   z-index: 10;
   visibility: hidden;
   transition: visibility 0.3s;
}
div#z20
{  display: inline-block;
   position: absolute;
   width: 350px;
   text-align: center;
   z-index: 20;
}
button.dimension /* same size as active start/stop buttons */
{  visibility: hidden;
}
#skullImg
{ height: 80px;
  display: inline-block;
}
</style>
<script>
var seconds = 10;
var countdownTimer = 0;

function startTimer() {
    if(!countdownTimer)
    {  countdownTimer = setInterval(secondPassed, 1000);
       secondPassed();  // start now
    }
}

function stopTimer() {
    clearTimeout(countdownTimer);
    countdownTimer = 0;
    showSkull(false);
}

function showSkull( on) {
    document.getElementById("z10").style.visibility = on ? "visible" : "hidden";
    document.getElementById("countdown").style.opacity = on ? 0 : 1;
}

 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 > 8) {
        document.body.style.backgroundColor = "green";
    } else if (seconds == 5) {
        document.body.style.backgroundColor = "yellow";
    } else if (seconds ==0) {
        document.body.style.backgroundColor = "red";
    } else if (seconds < 0) {
        showSkull(seconds & 1) // odd seconds  
    }
    seconds--;
}
</script>
</head>
<body>
  <div class="centerText">
    <div id="z0">
    <div id="z10"><img src="http://s15.postimg.org/es5w3xpob/skull.gif" id="skullImg"></div>
    <div id="z20">
        <span id="countFill">&nbsp;</span><br>
        <label for="start"><button class="dimension">Start</button></label>
        <label for="stop"><button class="dimension">Stop</button></label>
    </div>
        <span id="countdown">&nbsp;</span><br>
        <button id="start" onclick="startTimer()">Start</button>
        <button id="stop" onclick="stopTimer()">Stop</button><br>
    </div>
    </div>
</body>
</html>

图像

2 个答案: