[js]자바스크립트로 실시간 디지털시계 만들기

언어/JavaScript 2017. 12. 4. 00:35

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

이번엔 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

,

자바스크립트 JavaScript 로또번호 생성 소스

언어/JavaScript 2017. 11. 22. 23:15

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


자 이번엔 js로 로또번호 생성하는 소스를 만들어보겠습니다.


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
<script type="text/javascript">
    function Lotto() {
        var lotto = new Array(6); // 6개의 배열이 lotto에 저장
        var count = 0; //추출한 로또번호의 갯수
        var overl = true; // 번호중복 여부 변수
 
        while (count < 6) { // 로또번호 6번 얻을 때까지 반복.
            var number = 0; //랜덤번호 가져오는 변수
            number = parseInt(Math.random() * 45) + 1; // 1~45사이에 랜덤번호 추출
 
            for (var i = 0; i < count; i++) { // 1부터 i까지 반복하여 중복확인
                if (lotto[i] == number) { // 중복된 번호가 아니면 넘어가기.
                    overl = false;
                }
            }
 
            if (overl) { //중복 없을 시 count 1 증가
                lotto[count] = number; //추출된 번호를 배열에 넣기
                count++;
            }
 
            overl = true; //원래 true으로 돌아가기
        }
        var lotto_text = document.getElementById("lotto_text"); //입력폼 id 가져오기
 
        // 추첨된 로또번호 출력
        lotto_text.value = lotto[0] + ', ' + lotto[1] + ', ' + lotto[2] + ', ' +
                lotto[3] + ', ' + lotto[4] + ', ' + lotto[5];
    }
</script>


HTML

1
<input type="text" readonly="" id="lotto_text"><input type="button" value="로또번호생성" onclick="Lotto()">



결과:



여기서 가장 중요한 것은

9번줄에 있는 parseInt(Math.random() * 45) + 1; 부분대해서 설명 하겠습니다.

parseInt는 정수형 변환 하는겁니다.
안그러면 랜덤 숫자 추출하고나서 +1를 더하지 못하게 됩니다. 
왜냐하면 숫자가아닌 문자 타입으로 되어 있기 때문입니다.

Math 함수는 여러가지 수학적 상수와 함수들이 모여 있습니다.
즉 Math.PI 이렇게만 해도 파이값을 구할 수 있습니다.

Math.random()은 숫자가 랜덤값으로 구하게됩니다. 
그런데 옆에 왜 *45를 하는 걸까요?

랜덤 값은 소수만 출력 됩니다.  ex) 0.15376958879564406

0.15376958879564406 x 45 = 6.91963149580398..

이렇게 해서 정수화해서 소수 없애면 6이 됩니다.
그런데 로또숫자는 0부터가 아닌 1부터 시작 하므로 +1하게됩니다.
그러면 6+1 = 7 이렇게 랜덤숫자 가져오게 됩니다. 

이해되셨나요?


저작자표시

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

[js]자바스크립트로 실시간 디지털시계 만들기  (0) 2017.12.04
블로그 이미지

Gddong

,

공지사항

Tistory Cumulus Flash tag cloud by requires Flash Player 9 or better.

최근에 받은 트랙백

글 보관함

달력

«   2025/05   »
일 월 화 수 목 금 토
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

티스토리툴바