Question

当'休息'时间倒计时时钟达到10时，我想要“休息”div 显示并显示在“display”div上，导致“display”div被覆盖。当休息时间达到5时，我希望隐藏“休息”div，制作“显示”div 重新出现。

任何帮助都会很棒， DK

Answer 1

我认为已经解决了

Answer 2

CSS
    #rest.onTop {
        position:absolute;
        top:0;
        left:0;
    }

IS

 if(time == 10){
              document.getElementById("rest").className="onTop";              
        } else if(time == 5){
             document.getElementById("rest").style.display="none";
        } else if(time == 0) {
            el.innerHTML = "Times up!";    
            clearInterval(interval);
            return;
        }

Answer 3

我也解决了这个问题。 div位置必须设置为绝对位置，'display'div的位置也使用javascript计算。

这是my updated solution。我还使用了gaurang的解决方案简化了代码：

function countdown(element, minutes, seconds) {
...
        var eld = document.getElementById('display');
        var eldp = getElementPosition(eld);
        if(time == 10){
            el.style.top = eldp.top+'px';
            el.style.left = eldp.left+'px';
            el.style.position = 'absolute';
        } else if (time == 5){
            el.style.display='none';
        }
...
    function getElementPosition(Elem) {
        var offsetLeft = 0, offsetTop = 0;
        do {
            if ( !isNaN( Elem.offsetLeft ) ) {
                offsetLeft += Elem.offsetLeft;
                offsetTop += Elem.offsetTop;
            }
        } while( Elem = Elem.offsetParent );
        return {top: offsetTop, left: offsetLeft };
    }

元素位置的测量取自here。

满足javascript / jquery条件时显示DIV（包括jsFiddle链接）

3 个答案: