javascript - javascript / jquery条件が満たされたときにDIVを表示します（jsFiddleリンクを含む）

Question

「rest」時間のカウントダウンクロックが10に達したときに、「rest」divを表示して「display」divの上に表示し、「display」divがカバーされるようにします。残り時間が5に達したら、「rest」divを非表示にして、「display」divを再表示します。

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

どんな助けでも素晴らしいでしょう、DK

Answer 1

解決したと思います

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

Answer 2

フィドルは更新されました。 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;
        }

Answer 3

私もこの問題を解決しました。divの位置は絶対に設定する必要があり、'display'divの位置もjavascriptを使用してカウントされます。

これが私の更新されたソリューションです。また、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 };
    }

要素の位置の測定はここから行われます。