블로그에 사용할 디데이, 카운터 직접 만들어보기

자바스크립트로 블로그에 사용할 디데이, 카운터 직접 만들어보기

자바스크립트에 대한 포스팅을 올린김에 하나 더 올리도록 하겠습니다.
사실 저도 자바스크립트는 아주 기초밖에 알지 못합니다.
자바스크립트는 별도의 소프트웨어를 설치하거나 환경설정을 하지 않아도 웹브라우저가 지원을 해주기 때문에
자세히 몰라도 html 태그만 안다면 쉽게 이용할 수 있다는 장점이 있습니다.

오늘은 제가 2009년에 금연을 결심하고 블로그 사이드바에 달았던 금연일자 카운트 구현방법에 대해서
올리도록 하겠습니다.

이 카운트를 이용하면 카운트나 시험, 기념일등의 D-Day 기능으로 사용할 수가 있습니다.

D-Day는 이미 다음에서 위젯으로 제공을 하기 때문에 그것을 이용해도 됩니다만...
본인의 입맛에 맞게 직접 만들어보는 것도 나름 재미도 있습니다.

 

자바스크립트로 카운트, 디데이 만들기

먼저 소스를 보도록 하겠습니다. 

//<스타일시트>

<style>
#count {background: #ffffff;width:95%;margin-bottom:20px}
#count .bg   { background: #31bedc url(http://image.widget.wzdfactory.com/wzd_dday/d-day_bg_blue.gif); padding:12px }
#count .container  { border: 3px solid #26a5c0; background: #fff;}
#count .dday1  {padding: 0.6ex 0;font: bolder 170% Verdana, sans-serif, 맑은 고딕,
                       굴림;text-align: center;vertical-align: middle;width: 100%;color:#000}
</style>

//<자바스크립트 소스>

<script language=javascript>
function d_day() {
 var now = new Date();
 var dday = new Date("March 4, 2010"); // D-Day 를 입력 하세요 
 var toGo = dday.getTime() - now.getTime();
 var days = Math.abs(Math.floor(toGo / (1000 * 60 * 60 * 24)));
 document.write('<font color=#FF607F>'+days+'</font>');
}

</script>

먼저 카운트를 구현하기 위해서는 위와 같은 자바스크립트 소스가 필요합니다.
소스는 비교적 간단합니다.

위의 소스중 카운트나 디데이의 기준이 되는 날짜는 빨강색으로 표시한 부분으로
원하는 날짜로 변경을 하면 됩니다.

var dday = new Date("March 4, 2010");

날짜 적는 부분은 "월 일, 년" 순서로 적어줘야 하는데 여기서 월을 영문으로 적어야 합니다.
1월~12월에 해당하는 영어단어는 아래와 같습니다.
January, February, March, April, May, June, July, August, September, October, November, December
잊어버려서 달력보고 적었습니다. ㅎㅎ

영문으로 적는 것이 싫으시면 "var dday = new Date("March 4, 2010");" 대신에 아래와 같이 하셔도 됩니다.

(예. 2010년 3월 4일의 경우)
var dday = new Date(2010, 3-1, 4); // 여기서 월에 -1을 해줘야 합니다.  

---

카운트로 사용할 때 : 위 소스에서 날짜만 바꾸고 그대로 사용하면 됩니다. 
D-Day로 사용할 때 : 소스를 아래와 같이(빨간색 부분) 수정합니다. 
                               Math.abs(Math.floor(toGo / (1000 * 60 * 60 * 24))) +1 ; 

 

이제 이용방법입니다.

<이용할때 소스>

<div id="count">
<div class="bg">
<div class="container">
<div class=dday1>금연 <script language=javascript>d_day()</script> 일째</div>
</div></div></div>

이용하는 방법은 카운트(디데이)를 표시할 곳에 위의 소스를 삽입하면 됩니다.
메시지를 수정하기 위해서는
<div class=dday1>금연 <script language=javascript>d_day()</script> 일째</div> 에서
빨강색 부분을 수정하면 됩니다. d_day() 자리에 카운트된 날짜가 표시됩니다. 

사이드바에 카운트나 디데이를 표시하기 위해서는
html 배너출력버튼 플러그인을 삽입한 후에 위의 모든 소스를 입력해주면 됩니다.

 

사이드바에 배너 삽입하는 방법을 모를땐 여기 => http://chobo1.tistory.com/46

정리.
날짜만 수정한 후에 필요한 곳에 위의 모든 소스를 삽입하면 됩니다.

이렇게 간단한데 말로 설명하려니 은근 길어지고 지루해지네요!
필요하신분 편하게 이용하시고 이해가 안가는 경우 댓글로 달아주세요! ^^

덧1.
스타일시트에서 #count .bg 는 배경에 대한 스타일을 지정하는 부분인데 배경이미지는 다음위젯에서 사용하는 배경을 이용했습니다. 배경이미지를 바꾸려면 "http://image.widget.wzdfactory.com/wzd_dday/d-day_bg_blue.gif "을 다른 이미지 url로 변경하면 됩니다.