微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

JavaScript实现定时隐藏与显示图片的方法_javascript技巧

php中文网
发布： 2016-05-16 15:46:42
原创
2033人浏览过

本文实例讲述了javascript实现定时隐藏与显示图片的方法。分享给大家供大家参考。具体如下：

这里使用JavaScript实现定时隐藏与显示图片，设定图片在几秒后会自动显示，也会自动隐藏，秒数这个自己去定义吧，在JavaScript代码片段内。

运行效果如下图所示：

具体代码如下：

微撰
微撰

AI智能写作平台

微撰 207
查看详情 微撰

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>定时隐藏图片</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
var sec=10;
var timer;
function hidepic()
{
 sec--;
 if (sec==0){
  textfield.value = "图片被隐藏";
  soccer.style.visibility =(soccer.style.visibility == "hidden") &#63; "visible" : "hidden";
 }
 else{
  textfield.value = "图片会在 "+sec+" 秒后隐藏";
  setTimeout("hidepic()",1000);
 }
}
</SCRIPT>
<body onLoad = "hidepic();">
<center>
 <input name="textfield" type="text" size="20"> <br>
 <DIV ID="soccer" STYLE="position:absolute; left:333px; top:43px">
 @@##@@
 </DIV>
</center> 
</body>
</html>
登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript实现定时隐藏与显示图片的方法_javascript技巧
相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JS实现跟随鼠标的链接文字提示框效果 下一篇：jquery实现仿新浪微博评论滚动效果_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
深入理解JavaScript中的立即调用类表达式（IICE）及其执行机制 本文深入探讨JavaScript中立即调用类表达式（IICE）的执行机制，通过一个嵌套继承的示例，详细解析其声明、继承、实例化及构造函数调用顺序。我们将识别父子类关系，揭示属性初始化时序对结果的影响，并提供修正方案，旨在帮助开发者理解此类复杂结构的行为和潜在陷阱。
2025-11-23 12:33:01
835
React中Refs的正确姿势：深入理解createRef与自定义对象 本文探讨React中createRefAPI与自定义JavaScript对象作为ref的异同。通过分析createRef的源码，揭示其本质是一个返回{current:null}的工厂函数。虽然自定义对象在某些简单场景下也能工作，但createRef作为React提供的标准API，能确保代码意图清晰、保持一致性，并为未来的潜在功能扩展提供兼容性，是管理组件或DOM元素引用的推荐方式。
2025-11-23 12:31:38
189
CSS技巧：实现自定义反向滚动条行为 本文详细探讨如何利用CSS实现自定义的滚动条行为，特别是在处理水平滚动时，如何让滚动条的移动方向与内容移动方向相反。我们将通过设置元素的文本方向属性，结合实际代码示例，帮助开发者在不依赖JavaScript的情况下，实现更灵活的用户界面滚动体验，尤其适用于覆盖层（overlaydiv）等特定场景。
2025-11-23 12:26:02
131
Svelte应用中优雅集成第三方全局回调函数与模块依赖 在Svelte应用中，当第三方库（如GoogleSign-In）要求全局回调函数，且该回调函数需依赖Svelte组件内部导入的模块时，直接在app.html或Svelte组件中定义会遇到作用域问题。本文将介绍如何利用Svelte的onMount生命周期钩子，在组件挂载后动态初始化第三方库并注册回调函数，从而在Svelte组件内部安全地定义和使用包含模块依赖的全局回调，实现代码的封装性与可维护性。
2025-11-23 12:18:26
494
利用MUI useScrollTrigger实现粘性组件在父容器底部自动隐藏 本文详细介绍了如何在Material-UI(MUI)应用中，利用useScrollTrigger钩子结合React的useRef和useEffect，实现一个粘性组件在其父容器滚动到底部时自动隐藏的交互效果。通过动态设置useScrollTrigger的目标元素和滚动阈值，开发者可以精确控制粘性元素的显示与隐藏逻辑，从而优化用户体验，避免粘性元素遮挡底部内容。
2025-11-23 12:16:15
448
在HTML中导入JavaScript模块：解决类导入问题的指南 本教程详细介绍了如何在HTML文件中正确导入JavaScript类和模块。文章重点阐述了ES模块机制，包括使用type="module"属性、导入语句中必须包含文件扩展名以避免MIME类型错误，以及区分外部模块脚本与内联模块脚本的正确用法，并提供清晰的代码示例，帮助开发者解决常见的模块导入问题。
2025-11-23 12:14:34
376
深入理解React createRef()：为何不直接使用普通对象？ 本文探讨了React中createRef()API的实际作用及其与普通JavaScript对象作为ref的异同。通过分析createRef()的底层实现，我们将揭示其为何只是一个简单的包装器，并解释在功能上为何一个带有current属性的普通对象也能作为ref。尽管如此，文章将强调在实际开发中，出于代码清晰度、可维护性和未来兼容性考虑，官方createRef()仍然是推荐的最佳实践。
2025-11-23 12:05:59
644
JavaScript函数柯里化_偏函数与组合技巧 柯里化是将多参数函数转换为一系列单参数函数的技术，如constcurriedAdd=a=>b=>c=>add(a,b,c)；它支持偏函数应用，例如通过curriedFormat预设前缀和后缀生成新函数；结合函数组合compose(wrapInTag("p"),toUpperCase,trim)可构建清晰的处理链；实际使用中需避免过度柯里化，可借助Lodash的_.curry提升开发效率。
2025-11-23 11:59:30
728
React createRef 深度解析：为何推荐使用而非自定义Ref对象？ React的createRef()API用于创建Refs，尽管其内部实现看似简单，仅返回一个带有current属性的普通对象，导致开发者疑惑为何不直接使用自定义对象。实际上，createRef提供了与React机制更佳的兼容性、代码可读性及未来可扩展性。它确保了Ref在Ref转发等高级场景中的一致性和健壮性，是React官方推荐的标准化Ref创建方式，而非简单的语法糖。
2025-11-23 11:35:30
623
掌握JavaScript模块化导入：在HTML中正确引入JS类 本文旨在解决在HTML文件中导入JavaScript类时遇到的常见问题，特别是关于ES模块的正确使用。我们将详细讲解如何通过type="module"属性以及在import语句中指定完整的文件扩展名来成功导入和使用JavaScript类，并提供清晰的代码示例和注意事项，确保开发者能够顺利实现模块化开发。
2025-11-23 11:28:02
672
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部