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

最新推荐文章于 2022-08-06 18:31:21 发布

weixin_30597269

最新推荐文章于 2022-08-06 18:31:21 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuyiqing/p/8373064.html

版权

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

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

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

转载于:https://www.cnblogs.com/xuyiqing/p/8373064.html

weixin_30597269

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS应用实例3：定时弹出广告

在观看视频时候总会发现有广告弹出这里就做一个类似这样的定时弹出广告的实例：前面的JS代码和HTML写在同一个文件，实际开发中总是分开来写用的时候引入即可HTML代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫