<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{position:relative;height:800px;}
#wrap{300px;height:200px;background:#fafafa;box-shadow:5px 5px 5px #C9C9C9;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;}
#close{position:absolute;right:0;font-size:20px;right:15px;top:5px;cursor:pointer;}
.txt{max-height:100px;padding-top:30px;text-align:center;line-height:150px;}
.tip{position:absolute;bottom:0;text-align:center;border-top:1px solid #ccc;padding:6px 0;100%;}
#time{color:red;}
</style>
</head>
<body>
<div id="wrap">
<div class="txt">弹窗文字内容</div>
<div id="close">x</div>
<div class="tip">倒计时<span id="time"></span>s自动关闭</div>
</div>
<script>
window.onload=function(){
var box=document.getElementById("wrap");
var obj=document.getElementById("time");
var close=document.getElementById("close");
var num=10;
obj.innerHTML=num;
function timFn(){
num--;
obj.innerHTML=num;
if(num == 0){
box.style.display="none";
}
}
setInterval(timFn,1000);
close.onclick=function(){
box.style.display="none";
}
}
</script>
</body>
</html>