1.倒数几秒弹窗关闭

<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
    <!--[if lt IE 9]>
    <script src="js/respond/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond/respond.min.js" type="text/javascript"></script>
    <![endif]-->
</head>
<body>
    <script  type="text/javascript" src="/js/jquery.js"></script>
    <script  type="text/javascript">
    $(function(){

        popInfo("展示信息系你吸血你心心念念相信你息怒息怒展示信息系你吸血你心心念念相信你息怒息怒展示信息系你吸血你心心念念相信你息怒息怒",2000);

        function popInfo(content,time){
            var showTime=time/1000;
            var popInfoBox="<div class='pop-info-box' style=' 400px;padding: 12px 12px;background: #D9EDF7;text-align: center;position: fixed;left: 50%;top: 50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); ' ><p>"+content+"</p><p class='pop-info-close' style='margin-top: 10px;'><i>"+showTime+"</i>秒之后关闭</p></div>";
            $("body").append(popInfoBox);
            function changeInfoTime(){
                if(showTime){
                    showTime-=1;
                    $(".pop-info-close i").html(showTime);
                }else{
                    hidePop();
                }
                    
            };
            //hide
            function hidePop(){
                    $(".pop-info-box").hide();
            };
            setInterval(changeInfoTime,1000);
        }
    
    });
    </script>
</body>
</html>
View Code
如图：