倒计时关闭隐藏元素

目录

一、点击按钮关闭

二、定时器关闭

---

一、点击按钮关闭

先展示下我的结构样式

.box {
				width: 100%;
				height: 100px;
				background-color: orange;
			}

<div class="box">
			<button>关闭</button>
		</div>

首先需要获取点击的按钮元素和需要隐藏的元素，然后定义一个变量把获取的元素赋值给它

var box = document.querySelector('.box')
var btn = document.querySelector('button')

然后就需要绑定点击事件了，在点击按钮时让box元素隐藏，点击事件就完成了

btn.addEventListener('click', function() {
	box.style.display = 'none'
})

二、定时器关闭

也是一样先获取元素，我用的是setInterval定时器，每隔一秒调用一次，由于调用有一秒的延迟所以先调用函数，在调用回调函数，这样刷新时不会有一秒的空白期

var box = document.querySelector('.box')
var btn = document.querySelector('button')
var time = 5

getTime()
setInterval(getTime, 1000)
function getTime() {
	if (time == 0) {
		box.style.display = 'none'
		clearInterval(getTime)
	} else {
		btn.innerHTML = '关闭 还剩' + time + '秒'
		time--
	}
}