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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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获取一个变量的名字的方法
2014/09/05 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Python实现截屏的函数
2015/07/26 Python
Python输入二维数组方法
2018/04/13 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python常用的json标准库
2019/02/19 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
毕业自我评价
2014/02/05 职场文书
社保委托书怎么写
2014/08/02 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers