代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script>

        function init() {

            setTimeout("showAD()", 3000);

        }

        function showAD() {

            //首先要获取要操作的img

            var img = document.getElementById("img");

            //显示广告

            img.style.display = "block";

            //再开启定时器,关闭广告

            setTimeout("hideAD()", 3000);

        }

        function hideAD() {

            //首先要获取要操作的img

            var img = document.getElementById("img");

            //隐藏广告

            img.style.display = "none";

        }

    </script>

</head>

<body onload="init()">

<img id="img" src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_ad.jpg" width="100%"

     style="display: none;"/>

</body>

</html>

JS练习：定时弹出广告的更多相关文章

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

    在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...

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

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

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

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

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

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

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

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

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

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

  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. Wordpress的安装 for mac

    1.服务器环境要求 PHP 5.2.4或更新版本 MySQL 5.0或更新版本 Apache mod_rewrite模块(可选,用于支持“固定链接”和“站点网络”功能) 选择安装:XAMPP 2.XA ...

  2. P1830 轰炸III

    P1830 轰炸III 84通过 145提交 题目提供者wanglichao1121 标签模拟矩阵洛谷原创 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目背景 一个大小为N ...

  3. The bytes/str dichotomy in Python 3

    The bytes/str dichotomy in Python 3 - Eli Bendersky's website https://eli.thegreenplace.net/2012/01/ ...

  4. changing permissions of Read-only file system in linux

      up vote 2 down vote favorite 1 i use this command to make a bootable flash disk of linux mint sudo ...

  5. Xcode 设置图片全屏显示

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  6. B1277 [HNOI2002]Tinux系统 树形dp

    这个题bzoj上没有图,luogu上样例有问题...其实这个题代码不难,但是思考起来还是有一定难度的,其实这些题的重点都在于思考.我就不写了,洛谷上唯一的题解写的挺好,大家可以看一看. 题干: 在do ...

  7. JZOJ 1003 [ 东莞市选 2007 ] 拦截导弹 —— 递推

    题目:https://jzoj.net/senior/#main/show/1003 n^2 的话递推就可以啦. 代码如下: #include<iostream> #include< ...

  8. JSP-Runoob：JSP 日期处理

    ylbtech-JSP-Runoob:JSP 日期处理 1.返回顶部 1. JSP 日期处理 使用JSP最重要的优势之一,就是可以使用所有Java  API.本章将会详细地讲述Java中的Date类, ...

  9. spark 操作Hive时遇到的问题

    To adjust logging level use sc.setLogLevel(newLevel). For SparkR, use setLogLevel(newLevel).17/10/14 ...

  10. Mechanize抓取数据【Ruby】

    创建: 2017/08/05 更新: 2018/01/08 修正: ele_inner_text -> ele.inner_text                           补充: ...