问题遇到的现象和发生背景
做一个类似流氓广告的效果，就是点击关闭之后只是在界面上隐藏，实际上有个倒计时，倒计时结束之后广告又重新显示在原来的位置
问题相关代码，请勿粘贴截图
<style>
.father{
position: fixed;
right: 0;
bottom: 0;
width: 200px;
height: 300px;
background-color: orange;
}
.son{
position: fixed;
bottom: 280px;
right: 0;
line-height: 20px;
text-align: center;
width: 20px;
height: 20px;
background-color: #ccc;
}
</style>
<body>
<div class="father">
<div class="son">x</div>
</div>
<script>
var son = document.querySelector('.son')
var father = document.querySelector('.father')
son.onclick = function(){
father.style.display = 'none';
}
var time = setInterval(function(){
father.style.display = 'block'
},5000)
</script>
</body>
运行结果及报错内容
运行之后感觉每一次倒计时都不一样
我想要达到的结果
让广告在每次点击关闭之后都是5秒之后重新显示
