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 相关文章推荐
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
文件上传程序的全部源码
2006/10/09 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
详解用python写一个抽奖程序
2019/05/10 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python实现图片素描效果
2020/09/26 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
中职生自我鉴定范文
2013/10/03 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
预备党员介绍人意见
2015/06/01 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技