• 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>
  • 相关阅读:
    javaWeb快速入门+——初体验-HelloWorld
    简单理解Linux系统的挂载是什么鬼
    STM32MP157 Cortex®-M4高性能系列MCU
    常见六种锂电池特性及参数对比
    IIC通信详解
    stm32微秒延时问题
    STM32 HAL库实现微秒级别延时
    开关电源波纹的产生、测量及抑制
    图解DIY 1pA超微电流测试器
    stm32
  • 原文地址:https://www.cnblogs.com/xuyiqing/p/8373064.html
Copyright © 2020-2023  润新知