js 模拟prompt弹窗，模拟阻塞

可模拟阻塞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;
            width: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="width: 98%;font-size: 1.5em;"></p>
            <p style="text-align: right;">
                <button type="button" class="btn" onclick="dialogok()">确认</button>&nbsp;&nbsp;
                <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>

 

posted @ 2019-01-21 14:46  履霜.1989  阅读(742)  评论(0)    收藏  举报