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>
  • 相关阅读:
    ThreadPoolExecutor源码解析
    AQS框架
    (转)rvm安装与常用命令
    (转).gitignore详解
    (转)可简化iOS 应用程序开发的6个Xcode小技巧
    (转)webView清除缓存
    (转)git常见错误
    iOS本地通知
    (转)iOS获取设备型号
    (转)iOS平台UDID方案比较
  • 原文地址:https://www.cnblogs.com/xuyiqing/p/8373064.html
Copyright © 2011-2022 走看看