让广告在弹出后自动关闭 类似于倒计时，会用到下边的方法属性
oDiv.style.display = ‘block’; //让div显示
oDiv.style.display = ‘none’; //让div隐藏
效果如图：
附代码 已运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" style="height: 200px;width: 200px;
background: red;">
<span id="show"></span>
<input type="button" id="box" value="关闭" />
</div>
<script type="text/javascript">
function $(sel) {
//querySelector()
//返回文档中匹配指定 CSS 选择器的一个元素。
//获取文档中的 sel 选择器中的元素
return document.querySelector(sel);
}
//广告弹出自动关闭
//返回带有指定标签名的对象的集合 输出div标签内的内容
var box = document.getElementsByTagName('div')[0];
console.log(box);
//onclick of null/undefined
//返回文档中 id="#show"的元素 并赋给oSpan
var oSpan = $('#show');
//定义count初始值为5
var count = 50;
//改变oSpan中的值为count
//即id为#show span标签中的内容
//为什么在setInterval()的里边外边都要获取count？
//在外边获取count值 count的值才会从初始化的值开始显示
//若只写函数里边的那部分，
//则第一次显示的count值是执行过count--后的值
oSpan.innerHTML = count;
//定义一个计时器timer 传函数 函数执行的间隔时间
//倒计时 count--
var timer = setInterval(function() {
count--;
//在计时器里获取count值 count的只才可以--
oSpan.innerHTML = count;
//判断 当count减到0时 让广告自动关闭并清除定时器
if (count == 0) {
box.style.display = 'none';
clearInterval(timer)
}
}, 1000)
//获取按钮
let btn = document.getElementById('box')
//点击按钮时 让广告自动关闭并清除定时器
btn.onclick = function() {
console.log(1)
box.style.display = 'none';
clearInterval(timer)
}
</script>
</body>
</html>
3412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
