Programming/Javascript
디지털시계 구현하기
Javascript 디지털 시계 구현하기
Javascript만 활용하여
시간 : 분 : 초 로 출력되는 디지털 시계를 구현해보았다.
사용되는 함수로는
날짜와 요일, 시간을 알려주는 객체 Date()와
시간, 분, 초 값을 리턴하는 함수 getHours(), getMinutes(), getSeconds(),
그리고 SetInterval()이 있다.
new Date() 생성시 다음과 같이 출력된다.
Mon Apr 17 2023 14:35:56 GMT+0900 (한국 표준시)
SetInterval()은
SetInterval(function, milliseconds)로 사용할 수 있는데,
괄호 없이 함수명을 적고, 밀리세컨 단위의 초를 쓰면 된다. (1 sec = 1000 millisec)
n밀리초 단위로 function을 반복 실행하도록 설정이 가능하다.
이를 바탕으로 작성한 코드는 다음과 같다.
<body>
<h1 id="h1"></h1>
</body>
<script>
var clock = document.getElementById("h1");
function getTime() {
var time = new Date();
var hr = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();
hr = hr < 10 ? "0" + hr : "" + hr;
min = min < 10 ? "0" + min : "" + min;
sec = sec < 10 ? "0" + sec : "" + sec;
clock.innerHTML = hr + ":" + min + ":" + sec;
}
setInterval(getTime, 1000);
</script>
10 이하의 시/분/초는 앞에 0을 붙이기 위해
13~15줄에서 삼항연산자를 통해 조건식이 참이면 숫자 앞에 0을 붙이고, 거짓이면 그냥 출력되도록 하였다.
1초 단위로 시, 분, 초 값을 받아와 <h1>에서 출력되도록 하는 코드이다.
결과물
Contents
Liked this Posting!