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

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

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

JS应用实例3：定时弹出广告的更多相关文章

  1. 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)

     事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...

  2. 使用JS完成首页定时弹出广告图片

    一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none        定时操作: setInterval(“显示图片的函数”, 3000); 三.代 ...

  3. JavaScript学习——使用JS完成页面定时弹出广告

    1.获取图片的位置(document.getElementById(“”))  隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...

  4. 使用jquery完成定时弹出广告图片

    <script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...

  5. jQuery学习(二)——使用JQ完成页面定时弹出广告

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...

  6. JS练习：定时弹出广告

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  7. jQuery网页定时弹出广告

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  8. JavaScripts广告轮播图以及定时弹出和定时隐藏广告

    轮播图: 函数绑定在body标签内 采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...

  9. 009-定时关闭弹出广告窗口 By BoAi 20190414

    ;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...

随机推荐

  1. Java遍历树（深度优先+广度优先）

    在编程生活中,我们总会遇见树性结构,这几天刚好需要对树形结构操作,就记录下自己的操作方式以及过程.现在假设有一颗这样树,(是不是二叉树都没关系,原理都是一样的) 1.深度优先 英文缩写为DFS即Dep ...

  2. react mobx 装饰器语法配置

    1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add . 2.git commit -m & ...

  3. 如何利用sql 读取辅表的最大max 和第二最大max。。。。

    SELECT `主表`.id, `主表`.title, `辅表`.* FROM tableB AS `辅表` INNER JOIN tableA AS `主表` ON `主表`.id = `辅表`.f ...

  4. Unity 2017 Game Optimization 新版

    英文原版,PDF格式带目录,非常不错的关于性能优化的书籍 扫码时备注或说明中留下邮箱 付款后如未回复请至https://shop135452397.taobao.com/ 联系店主

  5. 114. Flatten Binary Tree to Linked List 把二叉树变成链表

    ［抄题］: Given a binary tree, flatten it to a linked list in-place. For example, given the following tr ...

  6. 51单片机学习笔记（郭天祥版）（1）——单片机基础和点亮LED灯

    关于单片机型号的介绍: STC89C52RC40C-PDIP 0721CV4336..... STC:STC公司 89:89系列 C:COMS 52(还有51,54,55,58,516,):2表示存储 ...

  7. Spring事务管理的四种方式（以银行转账为例）

    Spring事务管理的四种方式(以银行转账为例) 一.事务的作用 将若干的数据库操作作为一个整体控制,一起成功或一起失败.   原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不 ...

  8. 拿来主义：treeview插件父子节点问题

    鄙人公司没有专门的前端,所以项目开发中都是前后端一起抡.最近用bootstrap用的比较频繁,发现bootstrap除了框架本身的样式组件外,还提供了多种插件供开发者选择.本篇博文讲的就是bootst ...

  9. Zookeeper 集群配置及启动

    准备工作 1. 集群机器 192.168.8.2 192.168.8.6 192.168.8.11 2. 包 zookeeper-3.4.10.tar.gz 集群配置 1. 解压路径 192.168. ...

  10. php正则提取html图片(img)src地址与任意属性的方法

    <?php /*PHP正则提取图片img标记中的任意属性*/ $str = '<center><img src="/uploads/images/2017020716 ...