dom_9 定时关闭广告

作者: basicGeek | 来源:发表于2018-11-23 14:51 被阅读0次

dom_9 定时关闭广告
js实现倒计时广告效果
js之定时广告与其关闭
如何使用开屏广告提升应用广告收入
无标题文章
变了
NSTimer
ios开发小技巧总结（一）
我们真的活得这么寂寞吗
Day22操作系统定时任务

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
        }
        img {
            position: fixed;
            top: 50%;
            margin-top: -220px;
        }
        .img1 {
            left: 10px;
        }
        .img2 {
            right: 10px;
        }
        div {
            width: 800px;
            margin: 150px auto;
            color: red;
            text-align: center;
            font: 700 40px/50px "simsun";
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var imgArr = document.getElementsByTagName("img");
            //设置定时器
            setTimeout(fn,5000);
            function fn(){
                imgArr[0].style.display = "none";
                imgArr[1].style.display = "none";
            }
        }
    </script>
</head>
<body>
    <img class="img1" src="images/1.gif" alt=""/>
    <img class="img2" src="images/2.gif" alt=""/>
    <div>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
        我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
    </div>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .site-nav {
            height: 30px;
            background-color: #ccc;
        }
        .top-banner {
            background-color: blue;
        }
        .w {
            width: 1210px;
            height: 80px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
        }
        .search {
            width: 1210px;
            height: 80px;
            background-color: red;
            margin: 0 auto;
        }
        a {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background-color: #000;
            color: #fff;
            text-decoration: none
        }
    </style>
</head>
<body>
    <div class="site-nav"></div>
    <div class="top-banner" style="opacity: 1">
        <div class="w">
            <a href="#">×</a>
        </div>
    </div>
    <div class="search">

        <script>
            //需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
            //步骤：
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）


            //1.获取事件源
            var topBaner = document.getElementsByClassName("top-banner")[0];
            var a = topBaner.children[0].firstElementChild || topBaner.children[0].firstChild ;
            //定义定时器
            var timer = null;
            //2.绑定事件
            a.onclick = function () {
                //3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
                timer = setInterval(function () {
                    topBaner.style.opacity -= 0.1;
                    if(topBaner.style.opacity<0){
                        topBaner.style.display = "none";
                        clearInterval(timer);
                    }
                },50);
            }


        </script>
</div>
</body>
</html>

关闭ad