안녕하세요. 쥐똥박사입니다.

이번엔 javascript로 실시간으로 디지털 시계를 만들어봅시다.



html

1
2
3
4
<form name="timeForm" style="width: 100%; text-align: center; margin:40px">
  <img src="https://i.imgur.com/mF6EB7E.png" style=""><br>
  <input type="text" name="timeInput" class="timeInput" readonly="readonly">
</form>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
body{background: #000}
.timeInput{
  font-family: 나눔고딕,NanumGothic;
  font-size: 4em;
  border:1 #fff;
  color:#684816;
  text-align: center;
  padding: 30px;
  border-radius: 5px;
  background: #000;
  font-weight: bold
}

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//1초마다 함수 갱신
function realtimeClock() {
  document.timeForm.timeInput.value = getTimeStamp();
  setTimeout("realtimeClock()", 1000);
}
 
 
function getTimeStamp() { // 24시간제
  var date = new Date();
 
  var f_date =
    //년-월-일  시:분:초
    leadingZeros(date.getFullYear(), 4) + '-' +
    leadingZeros(date.getMonth() + 1, 2) + '-' +
    leadingZeros(date.getDate(), 2) + ' ' +
    leadingZeros(date.getHours(), 2) + ':' +
    leadingZeros(date.getMinutes(), 2) + ':' +
    leadingZeros(date.getSeconds(), 2);
 
  return f_date;
}
 
//숫자 두자리 ex) 1이면 01 앞에 0을 붙임
function leadingZeros(date, digits) {
  var zero = '';
  date = date.toString();
 
  if (date.length < digits) {
    for (i = 0; i < digits - date.length; i++)
      zero += '0';
  }
  return zero + date;
}

결과


'언어 > JavaScript' 카테고리의 다른 글

자바스크립트 JavaScript 로또번호 생성 소스  (0) 2017.11.22
블로그 이미지

Gddong

,