일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- JQuery
- 워크식스
- 홈페이지구축
- work6.kr
- plugin
- 커스터마이징
- 플러그인
- 홈페이지
- 홈페이지제작
- 쇼핑몰제작
- 3D프린터
- 쇼핑몰
- 쇼핑몰구축
- 개발자
- 사이트제작
- 웹퍼블리셔
- 프로그래머
- 웹디자이너
- 고도몰
- 웹개발자
- 제이쿼리
- 웹디자인
- 포트폴리오
- CSS
- PHP
- jQuery Plugin
- 안드로이드
- 튜닝
- 웹퍼블리싱
- 웹에이전시
- Today
- Total
그냥 개발자 블로그
남은 시간 표시하는 제이쿼리 플러그인 (jquery plugin) 본문
자바스크립트에서 다루기 까다로운 기술중에 하나가 바로 시간인데요.
다른 프로그램 언어에 비해 시간에 관한 함수들이 많이 자동화가 안되어 있어서죠.
위 예제 영상처럼 남은 시간 및 경과 시간을 나타내는건 더더욱이요.
그래서 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 |