开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >JavaScript实现一段时间之后关闭广告

JavaScript实现一段时间之后关闭广告

作者头像

GeekLiHua

发布于 2025-01-21 07:48:02

发布于 2025-01-21 07:48:02

6500

代码可运行

举报

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

JavaScript实现一段时间之后关闭广告

效果展示

概述

简介：通过JavaScript实现在一段时间之后，广告消失。

HTML部分

<body>
    <!-- 这里添加需要关闭的广告的图片 -->
    <img src="images/ad.jpg" alt="" class="ad">    
</body>

JS部分

<script>
        var ad = document.querySelector('.ad');
        // 其实就是一个setTimeout语法的例子
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 这里添加需要关闭的广告的图片 -->
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        // 其实就是一个setTimeout语法的例子
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

「Web编程API」- 04

api web 编程对象事件

请注意，本文编写于 2088 天前，最后修改于 174 天前，其中某些信息可能已经过时。

曼亚灿

2023/05/17

9080

JS基础第三课（定时器篇）

学习笔记前端 javascript

（1）概念：回调函数其实是一个参数，将这个函数作为参数传到别的函数里面，回调函数是最后执行的

申小兮

2023/04/14

2.1K0

dom啦12 简易轮播图

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{padding: 0px;margin: 0px;} div { width: 670px; border: 1px solid red; margin: 100px auto; position: relative; } div>img { vertical-align: bottom; } p

贵哥的编程之路

2020/10/28

2870

JavaSprict函数

html console width 对象函数

盛透侧视攻城狮

2024/10/21

620

原生图片详情定位效果

参考https://www.cnblogs.com/wang715100018066/p/13607330.html 的图片详情效果。。显然没有完全一样

biaoblog.cn 个人博客

2022/08/11

3480

我们一起学JavaScript之面向对象

javascript json php 面向对象编程

在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。

楠羽

2022/11/18

3640

我们一起学JavaScript之面向对象

sao气十足的网页特效，让你的网页“动”起来

不知道大家在浏览网站和博客的时候有没有见到过非常有意思的页面特效呢？今天大师兄就带给大家几个有趣的特效，而且不用写代码，引入就能使用

程序员老鱼

2022/12/02

7860

【JavaScript——函数编写】寻找小狼人（蓝桥杯真题-2456）【合集】

javascript 渲染游戏函数数组

Rossy Yan

2025/03/18

580

【JavaScript——函数编写】寻找小狼人（蓝桥杯真题-2456）【合集】

也许vue+css3做交互特效更简单

做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用vue，开发技术栈方面，理所当然就使用了vue+css3开发，过程中发现使用vue+css3开发特效，和javascript/jquery+css3的思维方式不一样，但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例，希望能起到拓展思维的作用，让大家明白vue+css3应该怎样开发交互效果！如果大家有什么好的建议，或者觉得我哪里写错了，欢迎指出！

守候i

2018/08/22

6450

也许vue+css3做交互特效更简单

【JavaScript小项目】轮播图

css src 定时器

思路分析 css定义图片样式。定时器每三秒换一个img src。代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a { text-decoration: none; } .cle { clear

efonfighting

2020/02/13

4920

【JavaScript小项目】轮播图

HTML5--sessionStorage、localStorage、manifest

sessionStroage: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </script><scr

eadela

2019/09/29

5210

HTML5--sessionStorage、localStorage、manifest

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

2023腾讯·技术创作特训营第四期前端

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

像素人

2023/12/26

5030

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

前端成神之路-WebAPIs04

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

海仔

2020/12/29

1.5K0

JavaScript高级

编程算法数据处理 jquery css

首先更正一个小问题，昨天的JavaScript入门一文中，末尾的“网页换肤”这个小案例的代码插入的有问题，插入的是名片案例的代码，排版不严谨向您致歉，现在补发更正。

小闫同学啊

2019/07/18

1.7K0

php 编程算法 jquery

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

清出于兰

2020/10/26

1.1K0

js对标签属性的增删改查

对象.属性是对系统自带的属性进行操作. Attribute是对自己写的属性进行操作。（自定义）

贵哥的编程之路

2020/11/03

5.9K0

JavaScript入门笔记

编程算法 hashmap ecmascript html

DOM(文档对象模型) 是浏览器对 html 文件的描述方式, DOM API是浏览器提供给JavaScript操作html页面内元素的方式。简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查)

菜菜cc

2022/11/15

7160

JavaScript案例：页面背景替换

src 事件算法

页面背景替换效果演示点击查看操作效果案例分析练习给一组元素注册事件给四个图片利用循环注册事件点击那个图片，页面背景替换为那个图片核心算法：把当前图片的src路径取过来，给body作为背景即可代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

岳泽以

2022/10/26

6370

JavaScript案例：页面背景替换

dom啦15 商品展示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-JavaScript-商品展示</title> <style> *{ margin: 0; padding: 0; } div{ width: 430px; margin: 100px auto;

贵哥的编程之路

2020/10/28

4850

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

html 函数前端事件 javascript

API是一个更广义的概念。而WebAPI是一个更具体的概念，特指DOM + BOM。

枫叶丹

2024/08/21

960

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

相关推荐

「Web编程API」- 04

更多 >

LV.2

腾讯业务安全工程师

专栏

6

作者相关精选

换一批

目录

JavaScript实现一段时间之后关闭广告
- 效果展示
- 概述
- HTML部分
- JS部分
- 完整代码

加入讨论

的问答专区 >

1高级后端开发工程师擅长3个领域

相关课程

一站式学习中心 >

云开发微搭低代码平台-一人构建企业级应用实战训练营

腾讯云微搭低代码

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

腾讯云开发玩转小程序实战训练营

云开发 CloudBase