티스토리 뷰


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


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

출처는 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입니다.

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




<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>



 실행 화면  


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

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

 
신고
댓글
댓글쓰기 폼