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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 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 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
学雷锋先进个人事迹
2014/05/26 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
催款函范文
2015/06/24 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL