简单的小广告

最新推荐文章于 2024-01-25 17:24:39 发布

哼,小呀么小胖子

最新推荐文章于 2024-01-25 17:24:39 发布

阅读量170

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102527147

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

规则:
每隔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>

哼,小呀么小胖子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单的小广告

规则:每隔5秒在右下角弹出小广告点击小广告跳转点击小广告上的×关闭小广告,但5秒后小广告重新出现若不点击小广告,10秒后小广告自动消失,但5秒后小广告重新出现效果所用知识点:创建事件监听 addEventListener || attachEvent事件绑定函数 addEvent(ele, type, fn)现代浏览器oDiv1.addEventListener('click...
复制链接

扫一扫

专栏目录