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

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

新老客户大回馈,云服务器低至5折

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

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

 

前面的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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS应用实例6:二级联动

下一篇:在angularjs指令中触发父组件中的方法