规则:
每隔5秒在右下角弹出小广告
点击小广告跳转
点击小广告上的×关闭小广告,但5秒后小广告重新出现
若不点击小广告,10秒后小广告自动消失,但5秒后小广告重新出现
效果
所用知识点:
创建事件监听 addEventListener || attachEvent
事件绑定函数 addEvent(ele, type, fn)
现代浏览器
oDiv1.addEventListener('click', function () {
console.log(999);
})
IE浏览器
oDiv3.attachEvent('onclick', function() {
})
解决兼容问题
function addEvent(ele, event, fn) {
if (ele.addEventListener) {
ele.addEventListener(event, fn)
} else {
ele.attachEvent('on' + event, fn)
}
}
addEvent(oDiv3, 'click', function () {
console.log('sqada');
})
事件流:事件流描述的是从页面中接受事件的顺序
但是,微软(IE)和网景(Netscape)开发团队提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)
事件捕获:事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件
事件冒泡:IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点
IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,JS支持了冒泡流和捕获流,但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器,建议大家使用冒泡流。
阻止事件冒泡:
oClose.onclick = function(e) {
var ev = event || e;
if(ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
oAd.style.display = 'none';
}
stopPropagation和cancelBubble的作用是一样的,都是用来阻止浏览器默认的事件冒泡行为。
不同之处在于stoppropagation属于W3C标准,试用于Firefox等浏览器,但是不支持IE浏览器。相反cancelBubble不符合W3C标准,而且只支持IE浏览器。所以很多时候,我们都要结合起来用。不过,cancelBubble在新版本chrome,opera浏览器中已经支持。
计时器
setInterval(function(){
count();
},1000)
每隔1000ms执行一次count函数
clearInterval() 停止setInterval方法
延时器
function say() {
alert("aaa");
timer = setTimeout(function () {
say();
}, 1000);
}
取消延时clearTimeout(timer);
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#ad {
width: 200px;
height: 200px;
position: fixed;
bottom: 10px;
right: 10px;
background: pink;
}
#close {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #e3e3e3;
}
</style>
</head>
<body>
<div id="ad">
<div id="closes"> 广告10s后关闭</div>
<div id="close">x</div>
</div>
</body>
<script>
var ads=document.getElementById("ad");
var clo=document.getElementById("close");
var clos=document.getElementById("closes");
var flag=false;
var time;
//开始先隐藏小广告
ads.style.display="none";
var i;
move();
//在小广告上绑定监听事件,若发生点击事件,跳转
ads.addEventListener('click',function(){
window.location.href="https://www.baidu.com/";
})
//若点击关闭
clo.onclick=function(e){
//取消冒泡产生的影响,若不取消,则在关闭小广告的同时也会发生跳转
//以下是防止浏览器兼容对其产生的影响
var ev=e||event;
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble();
}
//隐藏小广告
ads.style.display="none";
clos.innerHTML="广告"+10+"s后关闭";
//调用方法,5秒后重新出现小广告
move();
}
function move(){
//设置小广告出现的时间
i=10;
//如果小广告隐藏,则调用延时器,5秒后
if(ads.style.display=="none"){
var s= setTimeout(function(){
//关闭延时器,并且使小广告出现
flag=true;
if(flag){
clearTimeout(s);
}
ads.style.display="block";
clos.innerHTML="广告"+10+"s后关闭";
//调用计时器,每格一秒时间减1,直到i=1
time=setInterval(function(){
i--;
if(i>0){
clos.innerHTML="广告"+i+"s后关闭";
}else{
if( ads.style.display=="block"){
//10s后,使小广告消失
ads.style.display="none";
//重复调用该方法,5秒延时后出现广告
move();
}
}
},1000);
},5000);
}
//清除计时器
clearInterval(time);
}
</script>
</html>