模仿广告自动关闭效果

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>利用setTimeout延时器 制作广告自动关闭</title>

        <style>

            #div1{width: 400px; height: 200px; border: 1px solid black;  line-height: 200px; font-size: 50px;text-align: center; background-color: orange; margin: 100px auto;}

        </style>

        <script>

            window.onload = function(){

                var oDiv = document.getElementById('div1');

                setTimeout(function(){

                    oDiv.style.display = 'none';//将div设置成不可见，且不占空间

                }, 3000);//延时3s执行

            }

        </script>

    </head>

    <body>

        <div id = 'div1'>我是广告</div>

    </body>

</html>

浏览器效果：

利用setTimeout延时器 制作广告自动关闭的更多相关文章

  1. onload + setTimeout 用法，制作广告弹框效果

    一般来说,只有 <body>,<img>, <link>, <script>,<frame>, <frameset>, < ...

  2. js学习笔记（延时器）

    //setTimeout()   //功能:设置一个延时器   //语法:var timer = window.setTimeout(code,millisec);   //参数: code:是任何合 ...

  3. Unity中的定时器与延时器

    JavaScript中的定时器与延时器,分别是 setInterval.setTimeout,对应的清理函数是:clearInterval.clearTimeout. 而在Unity中,则分别是:In ...

  4. jQuery hover 延时器实现代码

    例如: 复制代码代码如下: $('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒.  ho ...

  5. AngularJs 延时器、计时器

    1.$timeout延时器 apptest.controller("main",function($scope,$timeout){ $scope.pink="pink& ...

  6. window对象，BOM，window事件,延时器,DOM

    01.定时器补充 function fn(){    console.log(1);}setInterval("fn()",100);  //定时器调用匿名函数/*   funct ...

  7. JS 定时器/延时器

    定时器 创建定时器    window.setInterval(方法类型,间隔时间(1000=1秒)) var timer=window.setInterval(func,2000); var i=0 ...

  8. Steam游戏《Northgard（北境之地）》修改器制作

    日期:2021.06.07 博客期:181 星期一 [温馨提示]: 我现在把资源先放到开头,不想研究学习的就直接取用.如果修改器失效了,你们可以在博客园本页直接评论,也可以给我发邮件告诉我,就是不要到 ...

  9. [刘阳Java]_酷炫视频播放器制作_JS篇

    此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...

随机推荐

  1. Java ExecutorService四种线程池的例子与说明

    1.new Thread的弊端 执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override public void run() { ...

  2. python自动化运维之路~DAY2

    python自动化运维之路~DAY2 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.字符编码与转码 1.什么是编码. 基本概念很简单.首先,我们从一段信息即消息说起,消息以人类 ...

  3. sudo 找不到命令 go

    错误描述 环境 CentOS7.1 x64 golang 1.9.3 golang目录:/home/moonlightwatch/go/ 环境变量配置: # /etc/profile export G ...

  4. secure CRT the remote system refused the connection 解决办法

    1.安装ssh服务器和客户端 apt-get install openssh-server apt-get install openssh-client 2.重启ssh /etc/init.d/ssh ...

  5. elasticsearch-head连接不上es

    修改elasticsearch.yml,增加如下字段 http.cors.enabled: true http.cors.allow-origin: "*" cros为: Cros ...

  6. PHP7 学习笔记（八）JetBrains PhpStorm 2017.1 x64 MySQL数据库管理工具的使用

    填写基本信息 这时候我们可以看到已经连接成功的数据库了 打开一个表,我们可以很清楚的看到数据库表的数据 切换到DDL模式

  7. Jmeter调用 Json接口测试之关键点申明Content-Type类型

    背景: 最近,在做接口测试发现创建运单接口,通过普通表单请求总是失败,开始我以为是后端接口出现问题,但通过前端页面都能创建运单,F12打开浏览器开发者模式,获取该接口请求入参发现,请求的数据格式是js ...

  8. FastReport"Text"对象中的HTML标签介绍以及使用

    "Text"对象可以理解一些简单的HTML标签.标签可位于对象中的文本.在默认情况下,标签是禁用的,要启用这些HTML标签,可选择对象上下文菜单中的“Allow HTML tags ...

  9. android SQLiteOpenHelper 使用

    1.实体 package mydemo.mycom.demo2.entity; public class UserInfo { private int id; private String usern ...

  10. 关于windows下的虚拟机Homestead在推送代码上github 步骤

    1.ssh 秘钥登录配置 使用以下命令检查主机是否生成SSH Key: > ls -al ~/.ssh 2.如果有秘钥,那就跳过这个步骤,如果没有秘钥,则运行以下命令来生成秘钥: ssh-key ...