可模拟阻塞for循环
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="btn.css">
<link rel="shortcut icon" href="favicon.ico">
<style>
#fullbg
{
background-color:#000;
opacity:0.5;
position: fixed;
left:0;right:0;top:0;bottom: 0;
z-index:100;
display:none;
}
#dialog
{
background-color:#fff;
border:1px solid #aaa;
400px;
margin:-120px 0 0 -200px;
position:fixed;
top:50%;
left:50%;
border-radius:5px;
z-index:101;
display:none;
}
#dialog div{padding:15px 30px;}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<div id="fullbg" onclick="closeBg();"></div>
<div id="dialog">
<div>
<p><h1>提示消息</h1></p>
<p><input type="text" id="msgRes" placeholder="请输入" value="Hi" style=" 98%;font-size: 1.5em;"></p>
<p style="text-align: right;">
<button type="button" class="btn" onclick="dialogok()">确认</button>
<button type="button" class="btn" onclick="dialogcancel()">取消<span id="timer">(9)</span></button>
</p>
</div>
</div>
</body>
</html>
<script src="jquery.min.js"></script>
<script>
var tmp = 0;//临时变量
var timer = null;//计时器
demo(tmp);//模拟弹窗
//模拟弹窗条件
function demo(tmp)
{
//for循环模拟中断
for(let i = tmp; i < 10; i++)
{
if(i==3)//触发弹窗条件
{
showtime(i+1);//跳过本次，下次从+1处开始
break;
}
else if(i==6)
{
showtime(i+1);//跳过本次，下次从+1处开始
break;
}
console.log(i);
}
// //setInterval模拟慢速for循环
// let i = tmp;
// let tt = setInterval(function(){
// if( i < 10)
// {
// if(i==3)
// {
// showtime(i + 1);//跳过本次，下次从+1处开始
// clearInterval(tt);//停止计数
// }
// else if(i==6)
// {
// showtime(i + 1);//跳过本次，下次从+1处开始
// clearInterval(tt);//停止计数
// }
// console.log(i);
// i++;
// }
// else
// {
// //初始化
// clearInterval(tt);
// tmp = 0;
// }
// },1000);
}
//确认按钮
function dialogok()
{
console.log( '你输入的值是：' + $('#msgRes').val().trim() );//显示信息
closeBg();//关闭弹窗，初始化计时器
demo(tmp);//继续流程
}
//取消按钮
function dialogcancel()
{
tmp = 0;
closeBg();
}
//计时器
function showtime(i)
{
tmp = i;//下次起始位置
showBg();//显示遮罩层+弹窗
let j = 9;//倒计时
timer = setInterval(function(){
if(j > 0)
{
j--;
}
else
{
dialogcancel();//计时结束：关闭弹窗，取消流程
}
$('#timer').text(' ('+ j +')');//显示倒计时
},1000);
}
//显示灰色遮罩层+弹窗
function showBg()
{
//计算遮罩层面积
let bh = window.screen.height;//屏幕分辨率高度
if(bh < document.body.scrollHeight)//求灰色遮罩层高度
{
bh = document.body.scrollHeight;//网页内容高度
}
$("#fullbg").css(//显示灰色遮罩层
{
'height': bh,
'width':'100%',
'display': "block"
}
);
$("#dialog").show();//显示灰色遮罩层
$('#msgRes').focus();//弹窗输入框获取输入焦点
}
//关闭灰色遮罩
function closeBg()
{
$("#fullbg,#dialog").hide();//隐藏灰色遮罩层，弹窗
//初始化计时器
if(timer)
{
clearInterval(timer);
timer = null;
}
}
</script>