zoukankan      html  css  js  c++  java
  • JS应用实例3:定时弹出广告

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

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

    前面的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>
  • 相关阅读:
    Traefik-v2.x快速入门
    jenkins pipeline持续集成
    phpstorm 2017激活码(方法)
    PHP保留两位小数的几种方法
    php 数组排序 按照某字段
    sql大全
    解决jpgraph在php7.0版本下时,无法显示例子图表的问题
    Linux 定时任务crontab使用
    VIM命令操作
    wampserver变橙色,apache 服务无法启动!问题解决小记(安装失败亦可参考)
  • 原文地址:https://www.cnblogs.com/xuyiqing/p/8373064.html
Copyright © 2011-2022 走看看