代码之家  ›  专栏  ›  技术社区  ›  Revers3

使倒计时计时器显示模式窗口引导

  •  2
  • Revers3  · 技术社区  · 7 年前

    我有模态和倒计时计时器的代码,但我不知道如何准确地使其调用模态。

    我试过几条我读过的建议,但都不管用,或者只是把代码搞糟了。

    var seconds = 300; //**change 120 for any number you want, it's the seconds **//
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Last chance!";
        } else {
            seconds--;
        }
    }
     
    var countdownTimer = setInterval('secondPassed()', 1000);
    <!-- Modal start-->
    <div class="modal fade" id="ventanamdl" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content"> <!-- to create more modals copy-paste from the div class "modal fade" until here, you can customize moda-content with css-->
                <div class="modal-header">
                  <h1>This is your last chance!</h1>
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                            
                <p>Your spot can't be reserved any longer! Click the button to join now!
                <br>
                <button id="btnjoin" type="submit" onclick="location.href='http://google.com';">Join!</button>
                </p>   
                  
                </div>
                <div class="modal-footer">
                This is your last chance!
                </div>
              </div>
            </div>
          </div>
    <!-- Modal end-->
        
    
    <div id="bottomdiv">
      <p class="mytext2">Over 87 people have claimed their spot. Get yours before time runs out! <span id="countdown" class="timer"></span></p>
    </div>
    1 回复  |  直到 7 年前
        1
  •  1
  •   Mahbubul Islam    7 年前

    只需使用

    $('#ventanamdl').modal('show');
    

    为了你的目的

    var seconds = 300; //**change 120 for any number you want, it's the seconds **//
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Last chance!";
            $('#ventanamdl').modal('show');
        } else {
            seconds--;
        }
    }
    
    //now your setInterval call is ok
    var countdownTimer = setInterval(secondPassed, 1000);
    

    确保引导CSS、JS和jQuery已正确加载。