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


Posted in Javascript onAugust 06, 2015

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

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

运行效果如下图所示:

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

具体代码如下:

<!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") ? "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">
 <img border="0" src="https://3water.com/images/logo.gif" >
 </DIV>
</center> 
</body>
</html>

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

Javascript 相关文章推荐
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
js生成随机数的方法实例
Oct 16 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 #Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 #Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 #Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
You might like
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python实现批量图片格式转换
2020/06/16 Python
python银行系统实现源码
2019/10/25 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
安全检查验收制度
2014/01/12 职场文书
电气个人求职信范文
2014/02/04 职场文书
医院总经理岗位职责
2014/02/04 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
网管求职信
2014/03/03 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Oracle 触发器trigger使用案例
2022/02/24 Oracle