<!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>
如图：