http://flipclockjs.com/ 자동 시계, 자동 카운터
o java-script
<div id="idCounter"></div>
<script>
var dEnd = new Date(2017, 9 -1, 29); dEnd.setHours(23, 59, 59); // 2017.09.29 23:59:59. setHours() 하지 않으면 00:00:00 이 됨
var oldDiff, isStop=false;
function getDigit(n){ return n>9 ? ''+n : '0'+n; } // 2 자리수로 표시
function setCounter(){
var dNow = new Date(); // dNow.setHours(dNow.getHours(),dNow.getMinutes(),dNow.getSeconds());
if(dEnd>dNow){ // D-day 지나면 카운터 멈춤
var diff = dEnd.getTime() - dNow.getTime();
var dds = Math.floor(diff /86400000); diff -= (dds *86400000); // 1일 = 24 시간 = 24 * 60 * 60 * 1,000
var hhs = Math.floor(diff /3600000); diff -= (hhs *3600000); // 1시간 = 60 분 = 60 * 60 * 1,000
var mms = Math.floor(diff /60000); diff -= (mms *60000); // 1분 = 60 초 = 60 * 1,000
var sss = Math.floor(diff /1000); // 1초 = 1,000 밀리세컨드
var newDiff = getDigit(dds)+' : '+getDigit(hhs)+' : '+getDigit(mms);
if(oldDiff!=newDiff){ oldDiff = newDiff; $('#idCounter').text(newDiff); }
}else{
isStop = true;
$('#idCounter').text('00 : 00 : 00');
}
}
$(document).ready(function(){ // clearInterval 이 먹혀야 하는데, 안 먹히면 다르게 세팅
setCounter();
var timer = setInterval(function(){ if(isStop) clearInterval(timer); else setCounter(); }, 10000); // 10초 마다 리셋, 필요한 만큰 세팅
});
'Local Oriented > jQuery' 카테고리의 다른 글
jquery OS 와 브라우저 종류/버전, 화면 사이즈 확인 (0) | 2014.10.15 |
---|---|
$(opener.document) (0) | 2014.08.11 |
이미지 로딩중 (0) | 2014.07.30 |
jQuery 애니메이션 (플러그인 포함) (0) | 2014.07.26 |
예전엔 id 가 여러개 사용되기도 했었는데, 이럴 때 jquery 를 사용하려면.. (0) | 2014.07.25 |