第一次嘗試自舉模式後，計數器值不能正常工作

Question

我有自舉模式，在7秒後它自動關閉，並且在這裏工作正常。

我的問題是我已經顯示計數秒也模式下，哪一個在第一次嘗試中工作正常。 但第一次嘗試後，而不是從0秒開始它從任何隨機數開始。我不知道我錯過了什麼。

$(function() { 
 
    $('.thank_you_modal').on('show.bs.modal', function() { 
 

 
    var myModal = $(this); 
 
    clearTimeout(myModal.data('hideInterval')); 
 
    myModal.data('hideInterval', setTimeout(function() { 
 
     myModal.modal('hide'); 
 
    }, 7000)); 
 

 
    var sec = 0; 
 

 
    function pad(val) { 
 
     return val > 9 ? val : "0" + val; 
 
    } 
 
    var timer = setInterval(function() { 
 
     document.getElementById("seconds").innerHTML = pad(++sec % 60); 
 
     document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
 
    }, 1000); 
 

 
    setTimeout(function() { 
 
     clearInterval(timer); 
 
    }, 7000); 
 

 

 

 

 
    }); 
 
});

#custom_modal .modal-content+span { 
 
    color: #fff; 
 
    text-align: center; 
 
    display: block; 
 
    font-size: 12px; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="modal" data-target="#custom_modal">Click me</a> 
 

 
<!--.......... Modal ..........--> 
 
<div class="modal fade thank_you_modal" id="custom_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-sm" role="document"> 
 
    <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> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <h2>Thank You</h2> 
 
     </div> 
 
    </div> 
 
    <span>This message will close in <span id="seconds">00</span> seconds</span> 
 
    </div> 
 
</div> 
 
<!--............Modal Ends........-->

Working Code in Codepen

Answer 1

此代碼爲我工作在codepen您提供！

$(function(){ 
    $('.thank_you_modal').on('show.bs.modal', function(){ 

     var myModal = $(this); 
     clearTimeout(myModal.data('hideInterval')); 
     myModal.data('hideInterval', setTimeout(function(){ 
      myModal.modal('hide'); 
     }, 7000)); 

var sec = 7; 

function pad(val) { 
    return val > 2 ? val : "0" + val; 
} 
var timer = setInterval(function() { 
    document.getElementById("seconds").innerHTML = pad(--sec % 60); 
    document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
}, 1000); 

setTimeout(function() { 
    clearInterval(timer); 
    sec = 7; 
}, 7000); 




    }); 
}); 

問題是，你忘記重新初始化你的「秒」爲7（倒計時效果）！