집 >웹 프론트엔드 >JS 튜토리얼 >일정한 간격으로 그림을 숨기고 표시하는 JavaScript 방법_javascript 기술

일정한 간격으로 그림을 숨기고 표시하는 JavaScript 방법_javascript 기술

WBOY원래의: 2016-05-16 15:46:421579검색

이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：JS는 마우스를 따라가는 링크 텍스트 프롬프트 상자 효과를 구현합니다.다음 기사：JS는 마우스를 따라가는 링크 텍스트 프롬프트 상자 효과를 구현합니다.

일정한 간격으로 그림을 숨기고 표시하는 JavaScript 방법_javascript 기술

관련 기사