javascript - 带设置超时的倒计时

Question

示例在这个示例中我无法实现动态倒计时..

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

正如您在上面的部分中看到的，我的时间处于strong状态，并且必须是倒计时

$(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

你可以这样做。我稍微改变了你的代码

$(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>