JS应用实例3：定时弹出广告

2018-06-24 01:27:18来源：未知阅读 ()

在观看视频时候总会发现有广告弹出

这里就做一个类似这样的定时弹出广告的实例：

前面的JS代码和HTML写在同一个文件，实际开发中总是分开来写

用的时候引入即可

HTML代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body onload="init()">
        <div>
            <img src="./img/1.jpg" width="100%" style="display: none" id="img2" />
        </div>
        <script src="1.js" type="text/javascript"></script>
    </body>

</html>

JS代码：

function init() {
    //设置显示广告图片的定时操作
    time = setInterval("showAd()", 2000);
}

function showAd() {
    //获取广告图片的位置
    var adEle = document.getElementById("img2");
    //修改广告图片元素里面的属性让其显示
    adEle.style.display = "block";
    //清除显示图片的定时操作
    clearInterval(time);
    //设置隐藏图片的定时操作
    time = setInterval("hiddenAd()", 2000);
}

//隐藏广告图片的函数
function hiddenAd() {
    //获取广告图片并设置其style属性的display值为none
    document.getElementById("img2").style.display = "none";
    //清除隐藏广告图片的定时操作
    clearInterval(time);
}

BOM对象：

window:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>window</title>
        <script>
            //确认删除框
            confirm("确定删除吗？");
            //输入框
            prompt("请输入");
        </script>
    </head>
    <body>
    </body>
</html>

history:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>history</title>
        <script>
            function back1(){
                history.go(-1);
                //history.back();返回上一页，两种方式效果相同
            }
        </script>
    </head>
    <body>
        <input type="button" value="返回上一页" onclick="back1()" />
    </body>
</html>

location:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>location</title>
        <script>
            function func(){
                location.href="4.html";
            }
        </script>
    </head>
    <body>
        <input type="button" value="跳转页面" onclick="func()" />
    </body>
</html>