开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

显示div一段时间,然后隐藏它

在前端开发中，我们可以使用JavaScript和CSS来实现显示一个div一段时间，然后隐藏它的效果。以下是一个简单的示例：

首先，我们需要创建一个HTML文件，其中包含一个div元素，如下所示：

<!DOCTYPE html>
<html>
<head>
 <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
 <script>
    // 在这里编写JavaScript代码
  </script>
</body>
</html>

接下来，我们需要编写JavaScript代码来显示div一段时间，然后隐藏它。我们可以使用setTimeout()函数来实现这个效果。以下是示例代码：

const myDiv = document.getElementById("myDiv");

// 显示div
myDiv.style.display = "block";

// 等待5秒钟，然后隐藏div
setTimeout(function() {
  myDiv.style.display = "none";
}, 5000);

在这个示例中，我们首先获取了id为“myDiv”的div元素。然后，我们将div的display属性设置为“block”，以显示它。接下来，我们使用setTimeout()函数来设置一个5秒钟的定时器。当定时器到期时，我们将div的display属性设置为“none”，以隐藏它。

您可以根据需要调整显示和隐藏div的时间，只需更改setTimeout()函数中的毫秒数即可。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

药不能停之--CSS怎么学怎么记效果好？

image.png CSS这个东西，唉，我也是不知道什么时候就学会了的。想当年根本没有前端，做网页就是table套table的时代，CSS基本上只能一种用法，就是用在a标签的链接颜色上。后来DIV CSS的概念出来了，这时CSS开始正式走进我的视野，不学不行啊。最开始时是简单的把table套table换成了div套div，就是所谓的DIV大泛滥，DIV满天飞。然后就是用CSS来控制DIV的宽和高，DIV这个东西它是块元素啊，当时也不懂什么块元素，就是发现它独占一行。那么怎么让DIV并排显示呢？查

06

JQuery 入门学习(一)

写这个之前要先抱歉一下，由于我这段时间要做一个网站，而且比较重要，所以之前那个gh0st的文章先停一段时间，实在没有功夫写那个代码了，不过迟早是会继续写的。

01

jQuery Mobile修改button的内容

jQuery Mobile修改button的内容。

02

你真的了解回流和重绘吗?(面试必问)

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。

04

你真的了解回流和重绘吗

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。

02

你真的了解回流和重绘吗

最近有空对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。

05

读者提问，如何让 tooltip 提示框内显示饼图

前些天有读者问，ECharts 的提示框（tooltip）内，能不能添加一个饼图？

03

【Java 进阶篇】揭秘 JQuery 广告显示与隐藏：打造令人惊艳的用户体验

在当今互联网时代，广告已经成为网页中不可忽视的一部分。然而，如何通过巧妙的交互设计，使广告既能吸引用户的眼球，又不会给用户带来干扰，成为了许多前端开发者需要思考的问题之一。在这篇博客中，我们将深入探讨如何使用 JQuery 实现广告的显示与隐藏，以及如何通过这一特效打造令人惊艳的用户体验。

04

揭秘 JQuery 广告显示与隐藏：打造令人惊艳的用户体验

在当今互联网时代，广告已经成为网页中不可忽视的一部分。然而，如何通过巧妙的交互设计，使广告既能吸引用户的眼球，又不会给用户带来干扰，成为了许多前端开发者需要思考的问题之一。在这篇博客中，我们将深入探讨如何使用 JQuery 实现广告的显示与隐藏，以及如何通过这一特效打造令人惊艳的用户体验。

01

微前端无界多页签实现

在程序员的眼里，多页签这个需求确实是影响应能，但是在大中国这种需求客户不会不提的，所以微前端都要解决这个问题。

01

CSS魔法堂：Transition就这么好玩

以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。

03

CSS魔法堂：Transition就这么好玩

前言以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。属性介绍首先先我们简单粗暴了解transition属性吧！ transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

05

vue上拉加载更多组件

我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。

01

能用CSS实现的就不用麻烦JavaScript

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。——Atwood定律

01

「原创」如何快速获取银行、联行号的数据？

经过一段时间的加班，终于是把项目熬上线了。本以为可以轻松一点，但往往事与愿违，出现了各种各样的问题。由于做的是POS前置交易系统，涉及到和商户进件以及交易相关的业务，需要向上游支付机构上送“联行号”，但是由于系统内的数据不全，经常出现找不到银行或者联行号有误等情况，导致无法进件。

06

js防抖和节流实现

1. 防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。 2.节流(throttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。

02

前段：可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。

04

BuildAdmin16：边栏隐藏、页面全屏，我用vue是如何实现的

弹出框的五个标签功能，重新加载、关闭标签、关闭其他标签、关闭所有标签都已经实现了，现就剩下当前标签全屏标签还没有实现。

00

前段：可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。

00

【Java 进阶篇】唤醒好运：JQuery 抽奖案例详解

在现代社交网络和电商平台中，抽奖活动成为吸引用户、提升用户参与度的一种常见手段。通过精心设计的抽奖页面，不仅可以增加用户的互动体验，还能在一定程度上提高品牌的知名度。本篇博客将通过详细解析 JQuery 抽奖案例，带领你走进一个富有情感色彩的好运之旅。

03

唤醒好运：JQuery 抽奖案例详解

在现代社交网络和电商平台中，抽奖活动成为吸引用户、提升用户参与度的一种常见手段。通过精心设计的抽奖页面，不仅可以增加用户的互动体验，还能在一定程度上提高品牌的知名度。本篇博客将通过详细解析 JQuery 抽奖案例，带领你走进一个富有情感色彩的好运之旅。

01

Shadow DOM的理解

Shadow DOM是HTML的一个规范，其允许在文档document渲染时插入一颗DOM元素子树，但是这棵子树不在主DOM树中，Shadow DOM如果按照英文翻译的话可以翻译为影子DOM，是一种不属于主DOM树的独立的结构。

01

可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。

02

可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。

01

笔记54 | 管理系统UI（二）

全屏沉浸式应用这节课将教您选择一种沉浸方式使用非粘性沉浸模式使用粘性沉浸模式 Adnroid 4.4(API level 19)中引入为 setSystemUiVisibility()引入了一个新标签 SYSTEM_UI_FLAG_IMMERSIVE，它可以让应用进入真正的全屏模式。当这个标签与 SYSTEM_UI_FLAG_HIDE_NAVIGATION和 SYSTEM_UI_FLAG_FULLSCREEN一起使用的时候，导航栏和状态栏就会隐藏，让你的应用可以接受屏幕上任何地方的触摸事件。当沉浸

04

面试官：useLayoutEffect和useEffect的区别_2023-02-20

大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会回答useEffect是异步的，useLayoutEffect是同步的，这样回答面试官真的会满意慢，我们需要说清楚他们在源码中的调用时机。

01

useLayoutEffect和useEffect的区别

大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会回答useEffect是异步的，useLayoutEffect是同步的，这样回答面试官真的会满意慢，我们需要说清楚他们在源码中的调用时机。

06

何为 content-visibility？

最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。

01

css3 属性 text-overflow 实现截取多余文字内容以省略号来代替多余内容

我们在设计网站的时候有时会遇到这样一个需求：因为页面空间大小的问题，需要将多余的文字隐藏起来，并以省略号代替，类似这样的效果：

01

学用Hooks写React组件——基础版Select组件

通过一个父组件包裹显示框组件和下拉框组件，这样的实现方式简单粗暴，而且能解决大部分场景，但是存在几个问题：

02

解释 JavaScript 中计时器的工作原理

在 JavaScript 中，计时器是一个非常值得注意的功能。与普通的手表计时器一样，我们可以一次启动计时器，并在特定时间后执行 JavaScript 中的函数或代码。

02

带你“深入”节流

比如说吃饭。吃饭说明规定，五个小时吃一次。吃了一次饭，小狗蹦蹦哒哒地玩了五个小时。五个小时一到，小狗再回来吃饭。依次类推，每五小时回来吃一次饭。

03

Bartender 4 for Mac(菜单栏应用管理软件)

Bartender 4 图标或通过热键，可以随时显示隐藏的项目。还你一个干净的Mac菜单栏，Bartender 您可以在菜单栏和隐藏项目中设置菜单栏项目的顺序，只需⌘+拖动项目即可。能够让我们把不需要直接显示的菜单栏的应用图标放在这个二级菜单栏中，或者直接隐藏。

01

python测试开发django-188.Bootstrap折叠（Collapse）插件

前言折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse）以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle=”collapse”都是必需的。单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容

05

【JavaScript】图解事件循环：微任务和宏任务

浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于事件循环的。

01

React Suspense 进阶用法，结合 useTransition 使用

我们在前面学习了 Suspense。Suspense 的 fallback 与子组件内容的显示是一个互斥关系。因此，当我们在请求过程中，需要显示 Loading 时，内容就会被隐藏掉。

01

jquery mobile 移动web(6)

jquery mobile 针对移动端设备的事件类型。　　1.touch 事件。　　　　tap 快速触摸屏幕并且离开，类似一种完整的点击操作。　　　　taphold 触摸屏幕并保持一段时间。　　　　swipe 在1秒内水平移动30px屏幕像素上时触发。　　　　swipeleft 向左侧滑动　　　　swiperight 像右侧滑动。　　2.方向改变事件　　　　orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返

CJSX试用 – 使用React靠谱的新姿势

React真是个好东西，不过JS语法有时候还是难免显得臃肿。ES6虽然改进了许多，不过还是有很多槽点。比起来我感觉CoffeeScript就舒服了许多。

02

Bartender 4 for Mac(应用图标管理工具)v4.2.11中/英激活版

Bartender 4 for Mac将大量的菜单有选择折进Bartender的二级菜单，不仅会看起来更整洁，使用起来也不会造成太大的麻烦。Bartender可以让你轻轻松松的组织你的菜单栏中的应用，不会因为过多的图标导致菜单栏过于臃肿。

01

hexo 中文文章渲染错误的bug解决

这实际上是在很长一段时间内困扰我的一个 bug，在 hexo s 本地查看 markdown 文章后，会偶发性地出现部分文章渲染错误的情况，

03

对html与body的一些研究与理解

最近一直构思着写篇关于<html>标签的文章，虽说之前处理过<html>标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。

03

selenium高级用法：获取经纬度

获取经纬度的方法有很多，通过调用某地图API，模块geopy。但这两种方式都有一定的缺点，调用某地图API访问次数有限，使用模块geopy虽然次数不受限制，但是这个模块只能精确到镇，如果地点再精确一点就可能会出现问题。今天我们来一点不一样的，直接使用selenium获取经纬度！

02

为什么操作DOM会影响WEB应用的性能？

面试官经常会问你：“平时工作中，你怎么优化自己应用的性能？” 你回答如下：“我平时遵循以下几条原则来优化我的项目、以提高性能，主要有：”

02

面试官:useLayoutEffect和useEffect的区别

hello，这里是潇晨，大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会回答useEffect是异步的，useLayoutEffect是同步的，这样回答面试官真的会满意慢，我们需要说清楚他们在源码中的调用时机。

03

【前端相关网页组件】纯CSS3实现 “图片轮播” 效果

使用纯CSS3代码实现简单的图片轮播 image.png 原理介绍跑马灯图： image.png 灯图原理： image.png 基本思路 1.基本布局：将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。 H5结构代码： image.png 2.设置动画：然后使用CSS3动画，通过对photos进行位移，从而达到显示不

09

Bartender 4 for Mac(应用图标管理软件)

Bartender 4 for Mac是Mac上简单实用的应用图标管理软件，Bartender 4 Mac帮您轻松的整理菜单栏图标，隐藏它们，重新排列它们，使用单击或键盘快捷方式显示隐藏的项目，并在更新时显示图标。

04

爱奇艺视频窗口显示不出来解决办法

自爱奇艺视频3.2版本以来，遇到爱奇艺视频窗口显示不出来，不管是从菜单、任务栏、桌面、还是通知栏点击，窗口都显示不出来，包括设置、关于等窗口统统显示不出来。应当是爱奇艺视频自3.2以来的BUG，因为其它软件正常，而且中间有回退到3.1也正常，现在3.3出来了，3.1已经无法使用，为此采用了本文的办法强制将它显示出来。

02

github博客Hexo引流到微信

相信有不少小伙伴都在github上创建了属于自己的博客，其中用Hexo的Next主题应该不少，那么，我们究竟该如何将博客的流量引流到微信呢？今天就来带你看一看。

01

解读，小程序显示关注公众号的组件是有条件的

以免同学们过分解读，进而增加往后跟大家讨论需求时的沟通成本，这里稍微解读一下“扫码打开小程序新增公众号关注组件”的功能。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭