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

【问题标题】：Display DIV when javascript/jquery condition is met (jsFiddle link included)满足 javascript/jquery 条件时显示 DIV（包括 jsFiddle 链接）
【发布时间】：2012-07-07 19:08:05
【问题描述】：

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

http://jsfiddle.net/n2learning/9FPG8/2/

任何帮助都会很棒，丹麦

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

我认为解决了

http://jsfiddle.net/9FPG8/10/

【讨论】：

感谢您的解决方案！ - 丹麦

【解决方案2】：

小提琴已更新。 http://jsfiddle.net/9FPG8/11/

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

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

【讨论】：

感谢您提交此内容。 - 丹麦

【解决方案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。

【讨论】：

这太好了，谢谢！考虑到我需要在生产应用程序中覆盖的 div 可能不是 top:0 和 left:0，getElementPosition() 将非常有用。
感谢 Derek，我也为 Encoder 和 Gaurang 的解决方案投了赞成票。一些看起来很困难的任务也可以变得简单。 :-)