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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
JavaScript实现前端倒计时效果
Feb 09 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP 事件机制(2)
2011/03/23 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
详解vue组件中使用路由方法
2019/02/12 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python网络编程实例简析
2014/09/26 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
局领导领导班子四风对照检查材料
2014/09/27 职场文书
初中体育教学随笔
2015/08/15 职场文书
Python WSGI 规范简介
2021/04/11 Python