2016-07-13 7 views
0

Ich baue einen Eignungstest mit einem Timer. Ich möchte ein div von Timeout auf Countdown beenden. und ist es möglich ein ** Lean Modal Popup ** Feld auf dem Countdown zu zeigen. Bitte helfen !!! Heres der CodeIch möchte ein div öffnen nach Countdown-Timer stoppt

Javascript

<script language="JavaScript" type="text/javascript"> 

function CountDownTimer(duration, granularity) { 
    this.duration = duration; 
    this.granularity = granularity || 1000; 
    this.tickFtns = []; 
    this.running = false; 
} 

CountDownTimer.prototype.start = function() { 
    if (this.running) { 
    return; 
    } 
    this.running = true; 
    var start = Date.now(), 
     that = this, 
     diff, obj; 

    (function timer() { 
    diff = that.duration - (((Date.now() - start)/1000) | 0); 

    if (diff > 0) { 
     setTimeout(timer, that.granularity); 
    } else { 
     diff = 0; 
     that.running = false; 
    } 

    obj = CountDownTimer.parse(diff); 
    that.tickFtns.forEach(function(ftn) { 
     ftn.call(this, obj.minutes, obj.seconds); 
    }, that); 
    }()); 
}; 

CountDownTimer.prototype.onTick = function(ftn) { 
    if (typeof ftn === 'function') { 
    this.tickFtns.push(ftn); 
    } 
    return this; 
}; 

CountDownTimer.prototype.expired = function() { 
    return !this.running; 
}; 

CountDownTimer.parse = function(seconds) { 
    return { 
    'minutes': (seconds/60) | 0, 
    'seconds': (seconds % 60) | 0 
    }; 
}; 


window.onload = function() { 
    var display = document.querySelector('#time'), 
     timer = new CountDownTimer(5), 
     timeObj = CountDownTimer.parse(5); 

    format(timeObj.minutes, timeObj.seconds); 

    timer.onTick(format); 

    document.querySelector('button').addEventListener('click', function() { 
     timer.start(); 
    }); 

    function format(minutes, seconds) { 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
     display.textContent = minutes + ':' + seconds; 
} 

if(display.textContent == 0){ 


      document.querySelector("#div1").style.display="block"; 





} 



}; 



</script> 

Html

<button>Start Count Down</button> 
    <div>Registration closes in <span id="time"></span> minutes!</div> 

div

<div id="div1" style="display:none;" ><p>Hello</p></div> 
+0

Ich denke, Ihr Problem ist, dass Sie eine Anzeige angeben: keine in HTML. Soweit ich weiß, wird Javascript das nicht überschreiben, da der Inline-Stil Vorrang hat. Versuchen Sie das div mit CSS zu verstecken, indem Sie ein