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网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue中template的三种写法示例
Oct 21 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
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python虚拟环境项目实例
2017/11/20 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
远程调用的原理
2014/07/05 面试题
实习会计求职自荐信范文
2014/03/10 职场文书
青年文明号服务承诺
2014/03/31 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
高中生物教学反思
2016/02/20 职场文书
JS ES6异步解决方案
2021/04/29 Javascript