页面自动关闭-详细内容 - 黄兵的个人博客

文章内容

2018/1/7 11:14:16,作者: 黄兵

页面自动关闭

最近要实现一个报名页面，报名成功后页面自动关闭，示例代码如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>十堰梵媞免费整形全城招募，让您漂漂亮亮过新年</title>
    <link href="~/Content/customer/free/default.css" rel="stylesheet" />
    <link href="~/Content/customer/free/reset.css" rel="stylesheet" />
    <link href="~/Content/customer/free/styles.css" rel="stylesheet" />
</head>
<body>
    <div id="msform">
        <div class="htmleaf-content">
            <ul id="progressbar">
                <li class="active">填写信息</li>
                <li>报名成功</li>
            </ul>
        </div>

        <fieldset>
            @if ((int)ViewData["Info"] == 1)
            {
                <div class="Info_Img">
                    <img src="~/Images/UpLoadImages/Success.png" alt="报名成功" />
                </div>
                <div class="Info_Text">
                    <h3>恭喜您，报名成功，请等待电话通知到院时间。</h3>
                    <h4>如有任何疑问，请<a href="http://8677333.com/call.html">在线咨询</a></h4>
                    <h4 id=" time">5秒钟后自动关闭</h4>
                    <h4><a href="javascript:clearTimeout(timer)">留在本页</a> </h4>
                </div>
            }
            else if ((int)ViewData["Info"] == 0)
            {
                <div class="Info_Img">
                    <img src="~/Images/UpLoadImages/Failed.png" alt="报名失败" />
                </div>
                <div class="Info_Text">
                    <h3>报名失败，你可以在线报名。在线报名<a href="http://8677333.com/call.html">点击这里</a></h3>
                    <h4>如有任何疑问，请<a href="http://8677333.com/call.html">在线咨询</a></h4>
                </div>
            }
            else
            {
                <h3>请不要非法访问，<b id="wait">3</b>s之后返回<a id="href" href="@Url.Action("Index","Free")">报名页面</a>。</h3>
            }
        </fieldset>
    </div>
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>    
    <script>
        (function () {
            var wait = $('#wait'), href = $('#href').href;
            var interval = setInterval(function () {
                var time = --wait.innerHTML;
                if (time <= 0) {
                    location.href = href;
                    clearInterval(interval);
                };
            }, 1000);
            $('#progressbar li').eq(1).addClass("active");
        })();

        var time = $('#time');
        //作业: 改成周期性定时器实现  
        function myClose() {//任务  
            //取出time中的数,保存在n中  
            var n = parseInt(time.innerHTML);
            n -= 1//将n-1  
            if (n > 0) {//如果n>0  
                //将n+秒钟后自动关闭 再放回time中  
                time.innerHTML = n + "秒钟后自动关闭";
                //再启动下一次定时器，将序号再保存在timer中  
                timer = setTimeout(arguments.callee, 1000);
            } else {//否则  
                close();//关闭  
            }
        }
        var timer = null;//保存定时器序号  
        window.onload = function () {
            timer = setTimeout(myClose, 1000);//启动一次性定时器  
        }
    </script>
</body>
</html>