[jQuery] Countdown Plugin

2011-10-15 by 편리

자바 스크립트로 만들어둔 소스를 사용하다가 이번에 디자인 요상(?)하게 나오는 바람에 카운터로 사용할
소스를 찾다보니 jQuery Countdown 플러그인이 있어 사용해봤는데 원하는 거의 모든 것을 구현할 수 있을
것만 같았다. 지금이야 이미지 숫자를 이용해서 카운터가 되도록 하는 것만 사용 중인데.. 아래 이미지처럼..

이미지의 아래처럼 구현을 해야했기 때문에.. 직접 자바스크립트 소스를 짜볼까도 생각을 했지만 그건 너무
시간 낭비인 것 같았고 또 숫자를 이미지로 치환하는 방식을 생각했는데 오히려 지금 플러그인 방식이 더 쉬운
방법이라는 생각이 든다. 숫자가 쭉 나열된 이미지를 배경으로 지정하고 배경의 위치를 이동하는 방식이다.

플러그인 다운로드 : http://keith-wood.name/countdown.html

아래는 테스트용으로 간단하게 만들어본 소스코드이다.

<?php

$endtime = strtotime(“2011-10-16 10:10:10”);

#glowingLayout { width: 418px; padding: 5px; height: 16px; background-color: #000; }

#glowingLayout span { display: block; float: left; width: 12px; height: 16px; background: url(counterbg.png) no-repeat 0px 0px; }

#glowingLayout span.image0 { background-position: -0px 0px; }

#glowingLayout span.image1 { background-position: -12px 0px; }

#glowingLayout span.image2 { background-position: -24px 0px; }

#glowingLayout span.image3 { background-position: -36px 0px; }

#glowingLayout span.image4 { background-position: -48px 0px; }

#glowingLayout span.image5 { background-position: -60px 0px; }

#glowingLayout span.image6 { background-position: -72px 0px; }

#glowingLayout span.image7 { background-position: -84px 0px; }

#glowingLayout span.image8 { background-position: -96px 0px; }

#glowingLayout span.image9 { background-position: -108px 0px; }

#glowingLayout span.imageDay { background-position: -120px 0px; }

#glowingLayout span.imageHour { width: 24px; background-position: -132px 0px; }

#glowingLayout span.imageMin { background-position: -156px 0px; }

#glowingLayout span.imageSec { background-position: -169px 0px; }

#glowingLayout span.imageSpace { width: 5px; background-position: -181px 0px; }

#glowingLayout span.imageSpace2 { width: 10px; background-position: -181px 0px; }

</style>

var year = ‘<?=date(“Y”, $endtime);?>’;

var month = ‘<?=date(“n”, $endtime);?>’;

var day = ‘<?=date(“j”, $endtime);?>’;

var hour = ‘<?=date(“G”, $endtime);?>’;

var minute = ‘<?=date(“i”, $endtime);?>’;

var second = ‘<?=date(“s”, $endtime);?>’;

$(function() {

$(‘#glowingLayout’).countdown({until: new Date(year, month-1, day, hour, minute, second), compact: true,

layout: ‘<span class=”image{d10}”></span><span class=”image{d1}”></span>’ +

‘<span class=”imageDay”></span><span class=”imageSpace2″></span>’ +

‘<span class=”image{h10}”></span><span class=”image{h1}”></span>’ +

‘<span class=”imageHour”></span><span class=”imageSpace”></span>’ +

‘<span class=”image{m10}”></span><span class=”image{m1}”></span>’ +

‘<span class=”imageMin”></span><span class=”imageSpace”></span>’ +

‘<span class=”image{s10}”></span><span class=”image{s1}”></span>’ +

‘<span class=”imageSec”></span>’

});

</script>

플러그인 다운로드 사이트에 나온 코드를 수정한 것인데.. 여기에 추가로 카운터가 종료되었을 때 표시되는 글자와
Callback 함수를 지정해서 해당 페이지가 새로 고침 되도록 할 예정이다. 쉽지는 않겠지만 도전해볼 가치는 있다!!

Leave a Reply Cancel reply