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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
JS数组的常用方法整理
Mar 31 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 ftp文件上传函数(基础版)
2010/06/03 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
python实现坦克大战
2020/04/24 Python
python中yield的用法详解
2021/01/13 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
促销活动总结范文
2014/04/30 职场文书
企业安全标语
2014/06/07 职场文书
婚前协议书标准版
2014/10/19 职场文书
清明节随笔
2015/08/15 职场文书
初中政治教师教学反思
2016/02/23 职场文书
入党申请书格式
2019/06/20 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python