티스토리 뷰

IT 이야기/프로그래밍

[Javascript] 홈페이지에 현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스

하늘과 나b 2011. 12. 3. 21:24

현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스


홈페이지에 현재의 년월일을 이미지로 된 숫자로 표기하고 싶을 때 사용하는 자바스크립트 소스입니다.

출처는 http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=130342940&qb=7J6Q67CU7Iqk7YGs66a97Yq4IOyGjOyKpA==&enc=utf8&section=kin&rank=52&search_sort=0&spq=0입니다.

개인적으로도 쓸 일이 있어 한 번 테스트한 후 남겨 봅니다.

년월일_숫자_표시_소스.zip




<html>
 <head>
  <title>숫자로 년월일 표시 소스</title>
  <script type="text/javascript">
    function getImgHtml() {
      var path = "";    //이미지 경로지정
      for (var i=0,s=[]; i<this.length; i++) {
        s.push("<img src=\""+path+this[i]+".jpg\" />");
      }
      return s.join("");
    }

    window.onload = function() {
      var myDay, year, month, date;
      myDay = new Date();
      year = myDay.getFullYear().toString();
      month = ("0"+(myDay.getMonth()+1)).match(/[0-9]{2}$/)[0];
      date = ("0"+myDay.getDate()).match(/[0-9]{2}$/)[0];
      var str = [getImgHtml.apply(year.split(""))];
      str.push("<b>년</b>");
      str.push(getImgHtml.apply(month.split("")));
      str.push("월");
      str.push(getImgHtml.apply(date.split("")));
      str.push("일");

      document.getElementById("date").innerHTML = str.join("");
    }
  //]]>
  </script>
 </head>

 <body>
   <div id="date"></div>
 </body>
</html>



 실행 화면  


실제 실행한 화면은 아래와 같습니다.
실제로 실행하면 아래와 같이 오늘 날짜의 연월일이 표시됩니다.

위의 소스를 받아서 한번 실행해 보시기 바랍니다.

 

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[HTML 쉽게 이해하기 강좌] - <form> 태그  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - Element Level에 대해서  (0) 2011.12.05
[HTML 쉽게 이해하기 강좌] - DOCTYPE에 대해서  (0) 2011.12.05
[Javascript] getElementById 예제 - 링크 보이기/숨기기  (0) 2011.12.05
[C언어] 함수 rand(), srand() 쉽게 이해하기  (55) 2011.12.05
[HTML 쉽게 이해하기 강좌] - <h1>~<h6> 태그에 대해서  (0) 2011.12.03
[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - 주석문  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌 #1] - HTML의 기본  (2) 2011.12.02
공유하기 링크
댓글