그냥 개발자 블로그

남은 시간 표시하는 제이쿼리 플러그인 (jquery plugin) 본문

소식/플러그인소식

남은 시간 표시하는 제이쿼리 플러그인 (jquery plugin)

마음이파파 2015. 9. 21. 17:12

자바스크립트에서 다루기 까다로운 기술중에 하나가 바로 시간인데요.


다른 프로그램 언어에 비해 시간에 관한 함수들이 많이 자동화가 안되어 있어서죠.







위 예제 영상처럼 남은 시간 및 경과 시간을 나타내는건 더더욱이요.


그래서 countTime.js 플러그인을 만들어 봤어요.


사용법도 매우 간단한데요.






<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="countTime.js"></script>


<script>

$(function(){

$('#countTime').countTime({

time:'2015-07-20 00:00:00'//기준시간

});

});

</script>


<body>

<span id="countTime"></span>

</body> 


우선 시간을 나타낼곳을 만들어주시고요.


아이디와 클래스는 원하시는대로 작성해주세요.








<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="countTime.js"></script>


<script>

$(function(){

$('#countTime').countTime({

time:'2015-07-20 00:00:00'  //기준시간

});

});

</script>


<body>

<span id="countTime"></span>

</body> 



홈페이지에서 다운 받은 countTime.js를 서버에 올린 후 link를 걸어주시고 위 처럼 원하는 기준 시간을 작성해주시면 끝이에요.


여기서 주의 할점은 기준 시간 포맷을 지켜서 써주셔야 한다는거고요. 


시간은 24시간표현법으로 써주세요.


예) 2015-07-07 24:00:00





이제 플러그인이 알아서 문자형 시간을 컴퓨터가 알아볼수 있는 시간 형태로 바꾸고 이를 다시 계산하여 우리가 보는 24시간 형태의 결과로 보여줄꺼에요.


ie11, 크롬, 사파리, 파이어폭스에서 테스트도 마쳤어요.







저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
sns공유하기 추가 제이쿼리 플러그인  (2) 2015.09.21
모바일웹 접속시 자동으로 바탕화면에 바로가기 생성  (1) 2015.09.21
소스 코드 보호 제이쿼리(jquery) 플러그인  (0) 2015.09.21
쇼핑몰 스카이배너 구현 제이쿼리 플러그인(jquery plugin)  (0) 2015.09.21
'소식/플러그인소식' Related Articles more