首頁  >  文章  >  web前端  >  JavaScript實作定時隱藏與顯示圖片的方法_javascript技巧

JavaScript實作定時隱藏與顯示圖片的方法_javascript技巧

WBOY
WBOY原創
2016-05-16 15:46:421522瀏覽

本文實例講述了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") &#63; "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="http://www.jb51.net/images/logo.gif" >
 </DIV>
</center> 
</body>
</html>

希望本文所述對大家的javascript程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn