如何使用倒数计时器停止弹出窗口显示多次
How to stop popup to show more than one time with countdown timer
您好，我创建了一个倒数计时器，它工作正常，但我希望在还剩 10 秒时显示一个弹出窗口，告诉用户时间即将结束。
我使用 bootstrap 模态来显示这个 PopUp
问题是当我尝试关闭弹出窗口时它再次显示。能否就此问题给出任何解决方案。
Here Is My Code It can be run on 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">×</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>
使用全局变量存储显示的状态并检查它。如果为假，则显示模态。
显示模态框后，将其设置为 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">×</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>
您好，我创建了一个倒数计时器，它工作正常，但我希望在还剩 10 秒时显示一个弹出窗口，告诉用户时间即将结束。
我使用 bootstrap 模态来显示这个 PopUp
问题是当我尝试关闭弹出窗口时它再次显示。能否就此问题给出任何解决方案。
Here Is My Code It can be run on 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">×</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>
使用全局变量存储显示的状态并检查它。如果为假，则显示模态。
显示模态框后，将其设置为 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">×</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>