可恶的广告弹窗！

万物皆“广告”最可恨，

有没有小伙伴和小编一样，打开电脑不一会这弹出一个小广告，那弹出一个小广告的，这些小广告要麽是些狂暴小游戏，要麽就是无聊视频。为解此愁，小编将以魔法打败魔法....

小编接下来要做的事就是教大家制作简易的“弹出广告窗口”，O(∩_∩)O ~~~

首先是我们HTML页面的结构

<div class="box" id="box">
     <span style="color:aliceblue" id="close">关闭</span>
     <marquee behavior="" direction="">大家好，我是渣渣辉，是兄弟就来砍我！！！！</marquee>
</div>

给页面结构添加一些样式

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 1px solid red;
            position: fixed;
            bottom: 0;
            right: 0;
            background: url(./img/z.gif) no-repeat;
            background-size: 100% 100%;
            /* display: none; */
            opacity: 0;
        }

        marquee {
            font-size: 28px;
            color: red;
            margin-top: 30px;
        }

        span {
            cursor: pointer;
        }
    </style>

javaScript事件：

<script>
        // 1. 获取元素 
        var box = document.getElementById('box')
        var close = document.getElementById('close')

        // 2.开启一个延时器，打开广告
        setTimeout(function () {
            box.style.opacity = 1
        }, 5000)
        //  3. 关闭广告  
        close.onclick = function (e) {
            e.stopPropagation()

            box.style.opacity = 0
            setTimeout(function () {
                box.style.opacity = 1
            }, 10000)
        } 
        // 4. 点击广告跳转  
        box.onclick = function(e){
            window.location.href  = 'http://www.4399.com'   
        }     
    </script>

 效果杠杠滴！

 

好啦~

“这些电脑广告不厚道，总是用漂亮的外观和闪亮的特效来吸引你，而我们实际上需要的是一个能抵挡意外咖啡泼洒的电脑。”