카운트 다운 타이머로 한 번 이상 표시되도록 팝업을 중지하는 방법

debugcn 에 게시 Dev

Aasiya Mairaj

안녕하세요 저는 잘 작동하는 카운트 다운 타이머를 만들었지 만 10 초가 남았을 때 사용자에게 시간이 끝날 것이라고 알려주는 하나의 팝업이 표시되기를 원합니다.

이 팝업을 표시하기 위해 부트 스트랩 모달을 사용합니다.

문제는 팝업을 닫으려고하면 다시 표시된다는 것입니다. 이 문제에 대한 해결책을 제시해 주시겠습니까?

여기에 내 코드가 있습니다. 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>

Md. Khairul Hasan |

표시된 상태를 저장하고 확인하려면 전역 변수를 사용하십시오. 거짓이면 모달을 표시합니다.

모달이 표시되면 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-9

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

카운트 다운 타이머로 한 번 이상 표시되도록 팝업을 중지하는 방법

카운트 다운 타이머로 한 번 이상 표시되도록 팝업을 중지하는 방법

신속한 라이브 카운트 다운 타이머에 시간을 추가하는 방법

카운트 다운이 끝난 후 카운트 다운 타이머가 자동으로 새로 고쳐지는 것을 중지하는 방법

카운트 다운을 완료하는 데 남은 시간이 30 분 밖에 남지 않은 상태에서 카운트 다운 타이머의 배경 또는 텍스트 색상을 녹색으로 변경하는 방법은 무엇입니까?

React에서 카운트 다운 타이머를 표시하는 방법

현명한 카운트 다운 타이머 시작 시험 방법

카운트 다운 타이머를 사용하여 게임을 중지하는 방법-iOS [SWIFT]-

시간을 표시하지 않는 카운트 다운 타이머

카운트 다운 타이머가 모달 창 부트 스트랩을 표시하도록합니다.

카운트 다운 시간 (H : i : s)을 사용하여 jquery 또는 js에 대한 메이커 카운트 다운 타이머는 어떻게됩니까?

카운트 다운 타이머의 현재 시간을 저장하는 방법이 있습니까?

카운트 다운 타이머에서 카운트 다운을 표시하려면 어떻게합니까

음수 카운트 다운을 계속하는 대신 새로 고침 타이머가 0에 도달하면 텍스트를 표시하도록합니다.

카운트 다운 타이머를 추가하는 방법

카운트 업 타이머에 분이 표시되지 않음

tkinter에서 카운트 다운 타이머가 업데이트되지 않음

반응 : 카운트 다운 타이머, 매초 상태 값을 줄이는 방법은 무엇입니까?

반응 카운트 다운 타이머를 만드는 방법

고급 카운트 다운 타이머를 만드는 방법

카운트 다운 타이머를 만드는 방법

어떻게 사용자가 시간을 시작으로 카운트 다운 타이머를 구현하는 방법?

asp.net mvc에서 타이머 카운트 다운 작업을 추가하는 방법

카운트 다운 타이머가 중지되지 않음

C # Windows Phone 계산을 중지하는 타이머 카운트 다운

한 페이지에 여러 카운트 다운 타이머

자바 스크립트에서 카운트 다운 타이머가 다시 시작되지 않도록 중지

c # 카운트 다운 타이머 일시 중지

다중 카운트 다운 타이머

안드로이드 백그라운드 카운트 다운 타이머를위한 가장 좋은 방법

카운트 다운 타이머를 다시 시작하는 방법과 초를 건너 뛰는 이유