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

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



html


CSS

   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초마다 함수 갱신
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

,

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


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


JAVASCRIPT




HTML





결과:



여기서 가장 중요한 것은

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

,

안녕하세요. 

이번에는 JQuery를 SelectBox를 제어하는 방법을 알아보도록 하겠습니다.


1. 현재 선택된 값을 구하기.

 //-========================

$("#selName option:selected").val();

 //-========================


2. 현재 선택된 내용을 구하기.

//-========================

$("#selName option:selected").text();

 //-========================

3. 선택박스에 옵션 추가하기

//-========================

// 기본 옵션 추가
$("#selName").append("<option value='값'>이름</option>");

// 옵션 최상단에 추가
$("#selName").prepend("<option value='값'>이름</option>");

// 특정 위치 아래에 옵션 추가
$("#selName option:eq(1)").after("<option value='값'>이름</option>");

// 특정 위치 위에 옵션 추가
$("#selName option:eq(2)").before("<option value='값'>이름</option>");

//-========================

4. 선택박스에 옵션 삭제하기

//-========================

// 첫번째 옵션 삭제하기
$("#selName option:first").remove();

// 마지막 옵션 삭제하기
$("#selName option:last").remove();

// 특정 위치 옵션 삭제하기
$("#selName option:eq(3)").remove();

// 모든 옵션 삭제하기
$("#selName").find("option").remove();

 //-========================

5. 특정 값으로 selected 이벤트를 주기

//-========================

// index 값으로 주기
$("#selName option:eq(0)").attr("selected","selected");

// value 값으로 주기
$("#selName").val("이름").attr("selected","selected");

 //-========================

6. 선택된 옵션의 index 구하기

//-========================

$("#selName option").index($("#selName option:selected"));

 //-========================

7. 선택된 옵션의 갯수 구하기

//-========================

$("#selName option").size();

 //-========================


블로그 이미지

Gddong

,