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中valueOf与toString区别浅析
Mar 19 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
基于Cesium绘制抛物弧线
Nov 18 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 开源AJAX框架14种
2009/08/24 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Javascript中的数学函数
2007/04/04 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python中交换两个元素的实现方法
2018/06/29 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python实现年会抽奖程序
2019/01/22 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
影视制作岗位职责
2013/12/04 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
军神教学反思
2014/02/04 职场文书
会计人员岗位职责
2014/03/19 职场文书
业务员自荐信范文
2014/04/20 职场文书
员工开除通知书
2015/04/25 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
《三国志》赏析
2019/08/27 职场文书