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

Question

当'休息'时间倒数计时器达到10时，我想让“休息”div到 显示并显示在“显示”div上，导致“显示“要覆盖的div。 当休息时间达到5时，我想要“休息”div隐藏，使“显示”div 重新出现。

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

任何帮助将是巨大的， DK

Answer 1

我也解决了这个问题。 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服用。

Answer 2

我认为解决

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

Answer 3

小提琴udpated。 http://jsfiddle.net/9FPG8/11/

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

JS

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