초를 1초씩 차감하면서, 일/시/분/초 로 보여주기. 여러개의 시간 표현
제목 : 초를 1초씩 차감하면서, 일/시/분/초 로 보여주기. 여러개의 시간 표현
소스 :
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>초 --> 남은 시간 스크립트</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="product">
<span sec="90119">
<span id="day"></span>일
<span id="hour"></span>시
<span id="min"></span>분
<span id="sec"></span>초
</span><br/><br/>
<span sec="3669">
<span id="day"></span>일
<span id="hour"></span>시
<span id="min"></span>분
<span id="sec"></span>초
</span><br/><br/>
<span sec="122">
<span id="day"></span>일
<span id="hour"></span>시
<span id="min"></span>분
<span id="sec"></span>초
</span><br/><br/>
<span sec="15">
<span id="day"></span>일
<span id="hour"></span>시
<span id="min"></span>분
<span id="sec"></span>초
</span><br/><br/>
</div>
<script type="text/javascript">
<!--
$('#product > span').each(function() {
var obj = this;
getDateCount(obj);
});
function getDateCount(obj){
var second = $(obj).attr("sec");
$(obj).attr("timer", setInterval(function() {
setTimeSaleTimer($(obj), second);
second -= 1;
}, 1000));
}
function setTimeSaleTimer(obj, objSec) {
var days = parseInt( objSec / 86400 );
var hours = parseInt( objSec / 3600 ) % 24;
var minutes = parseInt( objSec / 60 ) % 60;
var seconds = objSec % 60;
if (days == 0 && hours == 0 && minutes == 0 && seconds == 0) {
clearInterval($(obj).attr("timer"));
return false;
}
if (hours == 0) {
if (days > 0)
{
days --;
hours = 23;
}
}
if (minutes == 0) {
if (hours > 0)
{
hours --;
minutes = 59;
}
}
if (seconds == 0) {
if (minutes > 0)
{
minutes --;
seconds = 59;
}
} else {
seconds --;
}
$(obj).find('#day').html(days);
$(obj).find('#hour').html(hours);
$(obj).find('#min').html(minutes);
$(obj).find('#sec').html(seconds);
console.log('남은시간='+ days + '일'+hours+'시'+minutes+'분'+seconds+'초');
}
//-->
</script>
</body>
</html>
내용 :
sql에서 쿼리로 나온 second 를 jquery, javascript 로 일/시/분/초 1초씩 차감되는 스크립트
디데이 가능, 1초당 차감, 여러개의 div 에 표현 등 기능가능.
출처 : 나