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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 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
thinkphp的静态缓存用法分析
2014/11/29 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
Javascript - HTML的request类
2007/01/09 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python 标准差计算的实现(std)
2019/07/29 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
在校学生职业规划范文
2014/01/08 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
全陪导游欢迎词
2014/01/17 职场文书
酒店经理职责
2014/01/30 职场文书
运动会入场式解说词
2014/02/18 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL