流氓广告弹窗

思路:

        打开页面一段时间后弹出广告框

        关闭一段时间后再弹出广告框 

利用方法

        定时器

css部分

<style>
        div {
            width: 240px;
            height: 160px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: chartreuse;
             /* 默认就有弹出初始display为block */
            /* display: block; */
            display: none;
        }
        #close{
            position: absolute;
            top: 0;
            right: 0;
        }
        #open{
            position: absolute;
            bottom: 20px;
            left: 80px;
        }
    </style>

js部分

<div id="ad">
        <input type="button" id="open" value="跳转网页">
        <input type="button" id="close" value="×">
    </div>
    <script>
        //等待页面加载完成再加载js部分
        window.onload = function(){
            class ad{
                constructor(){
                    this.ad = this.$("#ad");
                    this.open = this.$("#open");
                    this.close = this.$("#close");
                    this.wait();
                    this.close.addEventListener("click",this.closeFn.bind(this));
                    this.open.addEventListener("click",this.openFn.bind(this));
                }

                //页面加载完成之后，等待6秒再弹出广告框
                wait(){
                    setTimeout(function(){
                        this.ad.style.display = "block";
                    }.bind(this),6000)
                }

                //关闭方法
                closeFn(){
                    this.ad.style.display = "none";
                    //每次关闭都会重新调用延时器，达到关闭之后再弹出弹窗的操作
                    this.wait();
                }

                //打开新页面方法
                openFn(){
                    location.href = "http://www.pixiv.com";
                    //真正关闭弹窗
                    this.ad.style.display = "none";
                }

                //获取节点的方法
                $(tag){
                    return document.querySelector(tag);
                }
            }
            new ad;
        }
    </script>

难点:

        class中this的指向问题

        一般广告图片存在加载比js慢的情况，引用window.onload会去掉这个bug

        关闭方法内一定要再次调用wait方法，才能做到关闭弹窗之后6秒再有弹窗出现