如何使用倒数计时器停止弹出以显示多次

时间：2016-06-30 07:31:10

标签： javascript php pagination youtube-data-api

您好我已经创建了一个正常工作的倒数计时器，但我希望在10秒钟时仍会显示一个弹出窗口，告诉用户时间即将结束。

我使用bootstrap模式来显示这个PopUp

问题是，当我尝试关闭弹出窗口时，它会再次显示。你能否解决这个问题。

  

这是我的代码它可以在localhost上运行。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--    <script src="js/jquery.min.js"></script>-->
    <script  type="text/javascript">
        var total_seconds = 15;
        var c_minutes=parseInt(total_seconds/60);
        var c_seconds=parseInt(total_seconds%60);
       // var hours=parseInt(total_seconds/3600);
        function CheckTime(){
        document.getElementById('time-left').innerHTML='Time Left: '+c_minutes+' min '+c_seconds+' sec';
        if(total_seconds<=0){
           // alert("oops no time left");
            //setTimeout('document.form.submit()',1);
        }else{
            //alert("start");
            total_seconds=total_seconds-1;
            c_minutes=parseInt(total_seconds/60);
            c_seconds=parseInt(total_seconds%60);
            //hours=parseInt(total_seconds/3600);
            //alert(total_seconds);
            document.getElementById('t_sec').value=total_seconds;
            var time_left = $('#t_sec').val();
            //alert(time_left);
            if(time_left<=10){
            //alert("hello "+time_left);
            $('#myModal').modal('show');
            $('#m_sec').text(time_left);
            }
            console.log(total_seconds);         
            setTimeout("CheckTime()",1000);
        }
        }
        setTimeout("CheckTime()",1000);

        function save_data(){

        var sec=document.getElementById('t_sec').value;

        $.ajax({
            type:'post',
            url: 'save_time.php',
            data:{total_sec:sec},
            success:function(response){

            }
        });
        alert(sec);
        //setTimeout('document.form.submit()',1);
        }


    </script>
    <style>
    .button{
            color: #fff;
        background-color: #3079ed;
        border: none;
        border-radius: 4px;
        text-align: center;
        white-space: nowrap;
        padding: 6px 12px;

/*      border-color: #ccc;*/
    }
    </style>
    </head>
    <body>
    <h1>Countdown Timer</h1>
    <div id="time-left"> </div>
    <br/><br/>
    <form method="post" name="form">
        <input type="hidden" name="tot_sec" id="t_sec" value="">
        <button name="sub" id="submt" onclick="save_data()">Save</button>
    </form>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog" style="margin-top: 150px;">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
<!--        <div class="modal-header">-->
    <div style="padding-top: 20px;padding-left: 15px;padding-right: 15px;padding-bottom: 20px;">
<!--          <button type="button" class="close" data-dismiss="modal">&times;</button>-->
<div style="background: #cbcdce;padding-left: 8px;"><h4 class="modal-title" style="font-size: 18px;font-family: segoe UI;font-weight: bold;">Warning</h4></div>
        </div>
<div class="modal-body" style="padding-left: 15px;padding-right: 15px;padding-bottom: 2px;padding-top: 2px;">
    <p style="font-family: Segoe UI;font-size: 15px;font-weight: 600;">oops!... Your time to complete survey is going to finish.</p>
    <div><span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;"> Your Survey will be submitted within</span> <span id="m_sec" style="color: #e61e1e; font-family: Segoe UI;font-weight: bold;"></span> <span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;">Seconds...</span></div>
        </div>
<!--        <div class="modal-footer">-->
    <div style="height: 45px;margin-top: 20px;margin-bottom: 20px;padding-right: 15px;padding-left: 15px;">
        <div style="float: right;padding-top: 4px;padding-right: 2px;padding-bottom: 4px;"><button type="button" class="button" data-dismiss="modal">OK</button></div>
        </div>
      </div>

    </div>
  </div>
  <!--End modal-->
    </body>
</html>

1 个答案:

答案 0 :(得分：0)

使用全局变量存储显示的状态并进行检查。如果为假，则显示模态。

显示模态后，它会设置为shown=true，以便永远不会再次弹出。

尝试以下代码。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--    <script src="js/jquery.min.js"></script>-->
    <script  type="text/javascript">
        var total_seconds = 15;
        var shown=false;
        var c_minutes=parseInt(total_seconds/60);
        var c_seconds=parseInt(total_seconds%60);
       // var hours=parseInt(total_seconds/3600);
        function CheckTime(){
        document.getElementById('time-left').innerHTML='Time Left: '+c_minutes+' min '+c_seconds+' sec';
        if(total_seconds<=0){
           // alert("oops no time left");
            //setTimeout('document.form.submit()',1);
        }else{
            //alert("start");
            total_seconds=total_seconds-1;
            c_minutes=parseInt(total_seconds/60);
            c_seconds=parseInt(total_seconds%60);
            //hours=parseInt(total_seconds/3600);
            //alert(total_seconds);
            document.getElementById('t_sec').value=total_seconds;
            var time_left = $('#t_sec').val();
            //alert(time_left);
            if(time_left<=10){
            //alert("hello "+time_left);
            if (shown==false){
                $('#myModal').modal('show');
                shown=true;
            }

            $('#m_sec').text(time_left);
            }
            console.log(total_seconds);         
            setTimeout("CheckTime()",1000);
        }
        }
        setTimeout("CheckTime()",1000);

        function save_data(){

        var sec=document.getElementById('t_sec').value;

        $.ajax({
            type:'post',
            url: 'save_time.php',
            data:{total_sec:sec},
            success:function(response){

            }
        });
        alert(sec);
        //setTimeout('document.form.submit()',1);
        }



    </script>
    <style>
    .button{
            color: #fff;
        background-color: #3079ed;
        border: none;
        border-radius: 4px;
        text-align: center;
        white-space: nowrap;
        padding: 6px 12px;

/*      border-color: #ccc;*/
    }
    </style>
    </head>
    <body>
    <h1>Countdown Timer</h1>
    <div id="time-left"> </div>
    <br/><br/>
    <form method="post" name="form">
        <input type="hidden" name="tot_sec" id="t_sec" value="">
        <button name="sub" id="submt" onclick="save_data()">Save</button>
    </form>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog" style="margin-top: 150px;">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
<!--        <div class="modal-header">-->
    <div style="padding-top: 20px;padding-left: 15px;padding-right: 15px;padding-bottom: 20px;">
<!--          <button type="button" class="close" data-dismiss="modal">&times;</button>-->
<div style="background: #cbcdce;padding-left: 8px;"><h4 class="modal-title" style="font-size: 18px;font-family: segoe UI;font-weight: bold;">Warning</h4></div>
        </div>
<div class="modal-body" style="padding-left: 15px;padding-right: 15px;padding-bottom: 2px;padding-top: 2px;">
    <p style="font-family: Segoe UI;font-size: 15px;font-weight: 600;">oops!... Your time to complete survey is going to finish.</p>
    <div><span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;"> Your Survey will be submitted within</span> <span id="m_sec" style="color: #e61e1e; font-family: Segoe UI;font-weight: bold;"></span> <span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;">Seconds...</span></div>
        </div>
<!--        <div class="modal-footer">-->
    <div style="height: 45px;margin-top: 20px;margin-bottom: 20px;padding-right: 15px;padding-left: 15px;">
        <div style="float: right;padding-top: 4px;padding-right: 2px;padding-bottom: 4px;"><button type="button" class="button" data-dismiss="modal" >OK</button></div>
        </div>
      </div>

    </div>
  </div>
  <!--End modal-->
    </body>
</html>
相关问题
最新问题