Countdown mit SetTimeout

Question

Beispiel gibt es etwas, das ich in diesem Beispiel nicht erreichen könnte, ist dynamisch Countdown ..

<span class="will-close">will be closed after : <strong>n</strong> seconds</span> 

als youu oben Teil sehe ich Zeit haben, die in stark ist und es muss sein Countdown

$(function() { 
 
    setTimeout(function(e) { 
 
    $('#AniPopup').modal('show'); 
 
    $(".will-close strong").html($("#AniPopup").attr("data-close")); 
 
    }, parseInt($('#AniPopup').attr('data-open')) * 1000); 
 
    setTimeout(function(e) { 
 
    $('#AniPopup').modal('hide'); 
 
    }, parseInt($('#AniPopup').attr('data-close')) * 1000); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="15" data-open="2" data-src="https://www.youtube.com"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="memberModalLabel">Popup Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quas.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
 
     <span class="will-close">will be closed after : <strong>n</strong> seconds</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Sie können wie folgt tun. Ich änderte den Code ein bisschen

$(function() { 
 
    var popup = $('#AniPopup'); 
 
    var time = $(".will-close strong"); 
 
    var closeSeconds = $("#AniPopup").attr("data-close"); 
 
    var openSeconds = $("#AniPopup").attr("data-open"); 
 
    
 
    setTimeout(function(e) { 
 
    
 
    popup.modal('show'); 
 
    time.html(closeSeconds); 
 
    
 
    var interval = setInterval(function(){ 
 
     time.html(closeSeconds); 
 
     closeSeconds--; 
 
     
 
     if(closeSeconds < 0){ 
 
     popup.modal('hide'); 
 
     clearInterval(interval); 
 
     } 
 
     
 
    }, 1000) 
 
    
 
    }, openSeconds * 1000); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="15" data-open="2" data-src="https://www.youtube.com"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="memberModalLabel">Popup Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quas.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
 
     <span class="will-close">will be closed after : <strong>n</strong> seconds</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

ausblenden modale nur, wenn das Ereignis ‚gezeigt‘ ausgelöst wird. In diesem Fall schließt das Modal jetzt nach 15 Sekunden. Sie müssen nur die modal auf gezeigt event.Try mit diesem Code

$(function() { 
 
    setTimeout(function(e) { 
 
    $('#AniPopup').modal('show'); 
 
    $(".will-close strong").html($("#AniPopup").attr("data-close")); 
 
    }, parseInt($('#AniPopup').attr('data-open')) * 1000); 
 
    setTimeout(function(e) { 
 
    $('#AniPopup').on('shown').modal('hide'); 
 
    }, parseInt($('#AniPopup').attr('data-close')) * 1000); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="15" data-open="2" data-src="https://www.youtube.com"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="memberModalLabel">Popup Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quas.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
 
     <span class="will-close">will be closed after : <strong>n</strong> seconds</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 3

Hier ist eine andere Lösung

$(function() { 
    var seconds = $(".will-close strong"); 
    var interval = $("#AniPopup").attr("data-close"); 
    var popuptime = $("#AniPopup").attr("data-open")*1000; /*Seconds To miliseconds*/ 
    var IntervalHandler = 0; 

    function Timer(){ 
     seconds.text(interval); 
     interval--; 
     if(interval < 0){ 
      $('#AniPopup').modal('hide'); 
      clearInterval(IntervalHandler);  /*Clear/Stop Timer Countdown*/ 
     } 
    } 

    setTimeout(function(e) { 
     $('#AniPopup').modal('show'); 
     seconds.text(interval); 
     IntervalHandler = setInterval(Timer,1000); /*Start countdown Timer*/ 
     },popuptime); 
});