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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
iview form清除校验状态的实现
Sep 19 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+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
100行代码实现一个vue分页组功能
2018/11/06 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python实现用户名密码校验
2020/03/18 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
UDP协议功能
2013/01/06 面试题
幼儿园教师培训方案
2014/02/04 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
古诗之感恩老师
2019/10/24 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python