开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用javascript在一段时间后将css显示从可见变为不可见

使用JavaScript可以通过操作CSS样式来实现将元素的显示从可见变为不可见。以下是一种实现方式：

首先，需要在HTML文件中引入JavaScript代码。可以通过在<head>标签中添加<script>标签来实现，或者将JavaScript代码保存为外部文件并使用<script src="your_script.js"></script>引入。
在JavaScript代码中，可以使用setTimeout函数来设置一个定时器，以在一段时间后执行特定的操作。该函数接受两个参数：要执行的函数和延迟的时间（以毫秒为单位）。
在要进行操作的元素上，可以使用document.getElementById或其他选择器方法获取到该元素的引用。
在定时器函数中，可以通过修改元素的CSS样式来实现将其显示从可见变为不可见。可以使用element.style.display属性来控制元素的显示状态。将其设置为"none"可以使元素不可见。

下面是一个示例代码：

// 获取要操作的元素
var element = document.getElementById("your_element_id");

// 设置定时器，在一段时间后执行操作
setTimeout(function() {
  // 将元素的显示状态设置为不可见
  element.style.display = "none";
}, 5000); // 5000毫秒后执行操作，即5秒钟后将元素不可见

在上述代码中，通过getElementById方法获取到要操作的元素的引用，并使用setTimeout函数设置了一个5秒钟的定时器。在定时器函数中，将元素的display属性设置为"none"，从而将其显示状态变为不可见。

这是一种使用JavaScript将CSS显示从可见变为不可见的方法。根据具体的需求和场景，还可以使用其他方法和技术来实现类似的效果。

相关搜索:如何隐藏鼠标光标在微软Blazor不活动一段时间后，不使用JavaScript？HTML div不会保持可见，即使在chrome扩展中单击按钮后将CSS显示标记更新为block之后也是如此 ( javascript )如何使用纯javascript将div移动到原始位置，并检查滚动条是否在可见区域之外 ios滑动解锁 ios内存开发 ios推送通知 iOS压缩图片 iOS键盘切换 iOS9提示框 IMSI序列号

相关搜索:

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

有帮助

没帮助

相关·内容

jquery中的$()是什么_js简单特效

1、动画的原理：动画是利用人眼的视觉残留特性而达成的一种视觉效果，即人眼看到的影像会有短暂时间的残留，这个时间约为1/24秒，当一段连续变化的影像在较短时间内变化时就会给人以流畅的感觉。根据1/24秒这个数据我们可以推断出，当连续变化的影像为每秒24次的速度就能给人流畅的感觉。所以电影的帧频为24帧，而电视一般采用的是25帧和30帧两种制式 2、帧：动画中最小单位的单幅影像画面,在讲多少帧的时候指的就是每秒钟画面切换的次数

02

容易被忽略的5个HTML技巧

对于所有 Web 开发人员来说，无论你选择的是哪种框架或后端语言，都需要大量使用 HTML（超文本标记语言）。

01

JavaScript动画基本原理

在现在做页面很多时候都会用上动画效果。比如下拉菜单，侧边搜索栏，层的弹出与关闭等等。通常我们实现这些动画效果可以采用 JavaScript与CSS3两种方式来实现。本文主要介绍JavaScript动画，CSS3的动画下次在总结。对于JavaScript动画目前有很多的动画插件库，如: Jquery等等.以下就简单介绍以下JavaScript动画的实现原理。

01

CSS Transition：为网页元素增添优雅过渡效果

CSS Transition是CSS3中的一个重要特性，它允许元素从一种样式逐渐改变为另一种样式。这种改变不是瞬间完成的，而是在一段时间内平滑过渡，从而给用户带来更好的视觉体验。

01

让你编码嗨到停不下来的8个VSCode插件

经作者授权后翻译成中文，原文链接：https://levelup.gitconnected.com/7-vs-code-extensions-that-make-you-want-to-keep-coding-forever-f205e597ae34。

02

2019 年最受欢迎的10个 JavaScript 动画库！

JavaScript 依然会是 2019 年最受欢迎和使用最为广泛的编程语言， JavaScript 生态系统也会继续发展壮大。

01

Web前端开发基础：HTML、CSS、JavaScript分别实现什么功能？

相信正在学习Web前端知识的小伙伴们都知道，学习Web前端开发基础技术需要掌握：HTML、CSS、JavaScript，那么这三个都是分别实现什么功能的呢？下面和小编一起来看看吧！

01

基于JavaScript+css写一个简单的h5动态下雨效果

前端它是一个工作，它的工作领域是浏览器，它即要跟美工、设计打交道又要懂点后台代码，知道ajax怎么从后台拿数据，接口怎么调用，最主要的是把美工的图合成完成的网页呈现在用户面前，需要实现网页的交互效果。

02

jQuery Growl 插件(消息提醒)

jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。

02

如何利用 gulp 压缩混淆 “上古”时期的项目文件

还是那些传统的方式，一个页面从上到下引入几十个「js」文件，里面到处充斥着 jquery 的 DOM 操作，维护起来相当的糟糕，变量与函数之间跨文件引用。

02

优雅的模块化后台界面渲染

的过程中,为了方便访问每一个插件的界面，我们需要将所有插件的自定义的界面集中在一起显示。我们需要实现一下功能：为了方便访问每一个插件的界面，我们需要将所有插件的自定义的界面集中在一起显示。我们需要实现一下功能：

02

01-Linux开篇-Android之路感触篇

零、前言 1.面对知识的更新迭代 1).若水很深，至少要带上游泳圈下去一次,不然你永远不知道水里是什么样的。 2).不要高估/低估自己，在承受力的200%之内尽量学习新的事物,永远不要在50%之前离开。 3).世间唯一不变的是变化本身，应变的能力、化不变为变化的能力、以不变应万变的能力是同义词。 4).不要放弃治疗，不要放弃学习，药不能停，书不能停。 2.玩安卓也有一段时间了,从HelloWorld开始，一步步向上求索: 1).各种控件、各种库像拼积木，一块一块搭成想要的效果，然后到某个阶段，

04

为什么Web开发人员在2020年不用最新的CSS功能

尽管CSS每年都会发布全新的特性，但实际上这些新功能很少会被web开发人员实际在生产项目中使用到，甚至去了解它们的动力也不会比去多完成几个需求更多。那究竟是什么原因导致的呢？

01

使用Firefox开发工具做性能审计

在本文中，我们将介绍Firefox Web开发工具(“DevTools”)——一组工具，旨在帮助开发人员检查、调试、配置和优化网站和Web应用程序的性能。我们将特别关注与性能相关的工具，但是我们还将了解如何开始使用DevTools，并了解一些有用的配置。

04

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在？Webpack 开发中间件模块热拔插（HMR）

多个月以来，我和多个Github上的社区贡献者一起建立支持库、包，我们最终的目的是希望完成这样一个作为起点的模板，也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中，这个模板包含一下这些方面：服务端预加载（预渲染）：这样你的UI可以快速的显示，甚至在浏览器下载Javascript之前。 Webpack中间件集成：在开发期间，你不需要一直重新编译你的客户端项目，或者你可以用一个watcher工具在后台帮你做这些事。模块热拔插：在开发期间，一旦你编辑了一个Typesc

06

JQuery 入门学习(一)

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

01

新时代的 Google Web Vitals 性能指标

传统的性能指标如 load time[1] 或 DOMContentLoaded[2] 专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。一个站点的总加载时间可以很快，但如果它直到所有内容都准备好了才渲染的话，用户只能盯着空白的屏幕一段时间。如果点击了按钮但没有反应，是因为主线程被 JavaScript 任务占满而阻塞了，此时虽然页面已经“加载”，但用户依然会感到沮丧。

03

前端课程——动画

CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分：

01

前端学习之路（从入门到...）

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。

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

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

01

2020年，9个前端的顶级 VS Code 扩展插件

VS Code 的插件甚至是主题都数不胜数，开发者根据自己的需求可以自由选择。一个配置合适的 VSC 可以提高开发效率，有的则能够帮助开发者写出更简洁美观的代码。在大量的插件中，为了避免大家挑花眼，我在这里和大家分享12个我个人认为对前端开发最有利的扩展。

04

编程江湖的那些事

Java开发教程视频关注我们，领取精品开发教程视频 1.初见c语言大侠和c++大侠话说在一个风和日丽的日子（不是月黑风高啦），一群小朋友在各个地方看到了C语言大侠和C++语言大侠。这两位大侠身手不凡，轻功了得，引得众多小朋友佩服不已，百于门下。然而C语言大侠和C++大侠的武功并不是短时间可以学会的，经过一段时间的武功学习之后，一群小朋友学武之心已经开始浮躁起来的，很多人都想可以开始行侠仗义。 2.与C语言大侠拜别一段时间之后，浮躁之心已经无法平静。一群小朋友决定拜别C语言大侠，到外面

01

2017年前端开发手册一-2016前端技术回顾

2017年前端开发手册公布了，从今天开始陆续为大家送上翻译文章。每日一篇，今天是第一篇，是作者对2016年前端圈的一次技术回顾。 PS：附上一首目前金曲榜第一的拉丁魔性歌曲，祝周末愉快。 1.2016年是UI组件,树的UI组件,用于构建复杂的用户界面。 2. 组件是由单个文件构成, 在一个文件可能包含HTML,CSS,JS!--这不再是亵渎主流开发的一句话。 3．React, Redux, Webpack, ECMAScript 2015 (又名 ES6),和Babel获得大规模采用。这些解决方案成为民

05

腾讯混元助手代码能力亲体验

大家好，我是喵喵侠。先前体验过一期混元大模型，有亮点有槽点。好在官方团队每隔一段时间，就会对大模型进行迭代优化，那么这次再来看看，混元大模型的实际表现如何。这里我准备了一些问题，让我们来一探究竟吧！

01

❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序。单击这些类别中的任何一个时。然后可以看到该类别中的所有作品，而隐藏其余作品。结果，用户可以轻松地找到他选择的图像。

02

JQuery中的动画

这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline，同理，如果当元素调用hide方法时，相当于将该元素的样式改为none；因此：$("element").hide()等同于$("element").css("display","none");

03

Opacity 属性引发的层叠问题

一般情况下，网页中的层叠规律是这样的：如果两个层都没有设置 position 属性为 absolute 或者 relative 属性，哪个层的HTML代码放在后面，哪个层就显示在上面。 Demo:

02

HTML 渲染那些事儿

最近一段时间刚好在公司内部涉及一些老旧项目的优化，所以对于 Web 网页性能方面沉淀了一些自己的看法。

03

Web真相: CSS不是真正的编程

每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性：

01

如何写好JavaScript - 笔记

我们知道，前端 web 对于 HTML、CSS、JavaScript 的分工都很明确。

03

Aptana：JavaScript开发利器

00

前端开发写代码哪个软件更好用？

群里的朋友，经常问到web前端开发写代码用那个软件好？今天在这里统一回答下，主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，做前端这么多年了，下面谈下我的使用感受吧。

04

前端技术观察第 16 期

How to Monitor Your Web Page's Total Memory Usage with performance.measureMemory()

03

Web（一）:概述

学Python也有一段时间了，学完基本语法后整个人都蒙了。没有什么可以来练手，感觉什么也不会。准备主攻爬虫和Web。昨晚学长刚给讲了MVC，回来看到Python的Web就看到MVC。

02

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

在本篇博客中，我们将学习如何创建一个具有多个功能的个人名片网页。这个项目包括背景轮播效果和3D卡片翻转效果，适合前端开发初学者。

01

《大前端开发》培训2周小结

经过两周的培训，以及大家的努力，每个人的成长都非常的快。零基础的同学也已开始对HTML、CSS以及JavaScript有了比较形象的认识，开始建立起了编程思维，可以开始独自编写页面代码了。

02

BOM和DOM

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

01

边缘计算也许是网络的未来

很长一段时间，我们的 web 开发感觉就像只有一台机器。我们的开发就像我们的代码部署在一个大型数据中心的某个服务器的单个实例上一样。

04

教你用 JavaScript 设计一个 Neumorphism 风格的数字时钟 (代码详解)

时钟是我们用来测量时间的装置。如果使用得当，时钟对于任何 UI 都是有用的元素。时钟可用于以时间为主要关注点的网站，例如一些预订网站或一些显示火车、公共汽车、航班等到达时间的应用程序。时钟基本上有两种类型，模拟和数字。在这里，我们将设计数字时钟并添加一些样式以使其更具吸引力。

04

TypeScript 中使用 CSS Modules

CSS 的全局性相当长一段时间 CSS 总是在页面上作为一个全局的存在，以前这个『特性』影响还不算很大，命名上注意一点，比如使用 BEM 也能一定程度上解决问题。但是随着 web 组件化的需求越来越强烈，CSS 的这种特性开始成为束缚开发者自由飞翔的绳索，每一个 CSS 类名都有可能产生意想不到的冲突，或者被各个组件覆盖来覆盖去，每当修改一个组件时，我们必须谨小慎微，注意是否会在全局环境下产生冲突。更严重的是，组件化的背景下，JS + 模板 + CSS 才能称为一个完整的组件，每个组件如果单独引用一个

07

webstorm 快捷键

最近一段时间在写javascript时，找到一个灰常强悍的IDE。名称叫：WebStorm

02

【CSS】381- 提升你的CSS选择器技巧

我为什么要这样做呢？我们都知道选择器，但麻烦的是随着时间的推移，很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。

04

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

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

02

详谈js防抖和节流

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

Web前端性能优化教程04：精简JS 移除重复脚本&图像和Cookie优化

一、精简javascript 基础知识精简：从javascript代码中移除所有的注释以及不必要的空白字符(空格，换行和制表符)，减少javascript文件的大小。混淆：和精简一样，会从javascript代码中移除注释和空白，另外也会改写代码。作为改写的一部分，函数和变量的名字将被转换为更短的字符串，所以进一步减少了javascript文件的大小。混淆的缺点 1. 缺陷：混淆过程本身很有可能引入错误。 2. 维护：由于混淆会改变javascript符号，因此需要对任何不能改变的符号进行标记，防止混

街灯说javascript学习笔记一

这是我学习javascript这门语言的第二周，下面是心得。我这两周都是在看教程，然后做实例，但是实例都是一个html文件，不停地预览覆盖，所以没有保存，从下周开始会注意保存练习，这周的进程有点慢，中间一段时间看了jquery的视频，但那个视频很多地方语言都很绕讲的不够通俗，明明一句话说完的东西把我绕的听不懂，看着费劲，so又转头继续看js的书，昨天刚把if语句看完。由于刚开始学习这类的语言，，所以也写不出来多少东西，我就挑几样印象深刻应该注意的方面来写：一、印象最深的是关于加法的运算符，就是“a++

05

聊聊未来的前端时代

2016年结束了，前端技术的发展也将进入到一个新的阶段，那么未来又会给我们带来什么呢？这里就个人发表下意见，欢迎点评。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭