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检测图片大小的实例
Aug 21 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
两个数组去重的JS代码
Dec 04 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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程序实现支持页面后退的两种方法
2008/06/30 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
Javascript 解疑
2009/11/11 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
javascript实现用户点击数量统计
2016/12/25 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
python打造爬虫代理池过程解析
2019/08/15 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
sort命令的作用和用法
2012/11/04 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
营业员演讲稿
2013/12/30 职场文书
出纳员岗位责任制
2014/02/11 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers