Develop/JavaScript JQuery JSP

0704 시간 띄우고 인터벌로 갱신하기

포페PostFace 2022. 7. 4. 18:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
	/* function init() {
		var now=new Date();
		
	} */
	//setInterval(해야할일, 시간); //1000= 1초 설정한 시간 간격마다 반복해서 해야할 일을 실행
	//setTimeout(해야할일, 시간) 뒤의 설정한 시간이 지나면 해야할 일을 딱 한번만 실행한다.
	window.onload = function(){
		var time=setInterval(function() {
			now=new Date();
			hour=now.getHours();
			if(hour>=12)
				clock="오후 "+(hour-12)+"시";
			else
				clock="오전 "+hour+"시";
			
			minutes=now.getMinutes();
			clock += minutes+"분";
			seconds=now.getSeconds();
			clock += seconds+"초";
			
			var area= document.getElementById("result");
			area.innerHTML= clock;
		},1000);
		window.setTimeout(function(){ //window는 언제나 생략 가능하다.
			window.clearInterval(time);
			var area= document.getElementById("result");
			area.innerHTML= "중지합니다.";
		}, 10000);
	}
</script>
</head>
<body ><!-- onLoad="init()" -->
	<h1>현재 시간이 나타납니다.</h1>
	<br>
	<div id='result'>
	
	</div>
</body>
</html>
Insert title here

현재 시간이 나타납니다.


'Develop > JavaScript JQuery JSP' 카테고리의 다른 글

0705 JavaScript & JQuery Start  (0) 2022.07.06
0704 <form> 태그의 특성  (0) 2022.07.04
0704 PopUp과 리턴데이터 활용  (0) 2022.07.04
0704 Popup과 리턴 데이터  (0) 2022.07.04
0704 이중배열  (0) 2022.07.04