3초기억력

초를 1초씩 차감하면서, 일/시/분/초 로 보여주기. 여러개의 시간 표현 본문

코딩_jquery

초를 1초씩 차감하면서, 일/시/분/초 로 보여주기. 여러개의 시간 표현

잠수콩 2015. 5. 26. 15:31

 

 



제목 :  초를 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 에 표현 등 기능가능.


 


예제 소스 파일 :

index.html

 


 출처 :  나


 

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

'코딩_jquery' 카테고리의 다른 글

ajax 이미지 업로드  (0) 2015.06.30
jquery.masonry.min.js  (0) 2015.05.27
QR CODE, QR 코드 html 에서 보기  (0) 2015.05.22
jquery 모바일웹/웹 더보기 자동스크롤  (0) 2015.05.20
Jquery SliderKit 이미지 슬라이더 js  (0) 2015.03.17
'코딩_jquery' Related Articles more
Comments