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


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







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


그래서 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, 크롬, 사파리, 파이어폭스에서 테스트도 마쳤어요.







+ Recent posts