制作成功图片:如下
<style>
*{
margin:0;
padding:0;
}
#box{
width: 200px;
height: 200px;
background: url("./img/tubiao.jpg") no-repeat;
background-size: cover;
position: fixed;
right:0;
bottom:0;
display: none;/*默认隐藏 超时调用之后显示 之后在点击关闭 5秒之后在弹出*/
}
span{
display: inline-block;
width:30px;
height: 30px;
text-align: center;
background: #ccc;
line-height: 30px;
}
</style>
<div id="box">
<span id="spa">X</span>
</div>
<script>
//超时调用方法:1.setTimeout(function(){},1000) 2.setTimeout(fn1,5000)
//先获取标签
var box=document.getElementById("box");
var spa=document.getElementById("spa");
//超时调用时间
setTimeout(fn1,5000);
//点击事件
spa.onclick=function() {
box.style.display="none";//隐藏
// location.href="http://www.baidu.com";//也可以关闭之后跳转另一个网页 百度....
setTimeout(fn1,5000);//隐藏之后 5秒在超时调用
};
//封装函数 可以直接调用 多次使用
function fn1() {
box.style.display="block";
}