자정 24시간 타이머(카운트다운-남은시간) > 그누보드5 팁자료실

그누보드5 팁자료실

자정 24시간 타이머(카운트다운-남은시간) 정보

자정 24시간 타이머(카운트다운-남은시간)

본문

day = math.floor

1000*60*60*24이렇게 쓰기 귀찮아서

그냥..짜봤어요..누군가 필요할 수도 있을거란 생각에 공유드립니다

https://codepen.io/derrickmckeown/pen/KLDhk?css-preprocessor=sass

위 코드펜 참고해서 만들엇는데 시와 분이 반올림이 안되어있어서

수정해놨어요

2041240632_1630919944.9083.png

마크업도 별도로해놨으니..CSS는 꾸미시면 되실거라..

2041240632_1630920020.2826.png


<style>
    @import url(https://fonts.googleapis.com/css?family=Lato:100,400);
    #the-final-countdown {
      background: #333;
      font-family: 'Lato', sans-serif;
      text-align: center;
      color: #eee;
      text-shadow: 1px 1px 5px black;
      padding: 1rem 0;
      font-size: 3rem;
      border: 1px solid #000;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="the-final-countdown">
  <p></p>
</div>
<script>
    setInterval(function time(){
      //시간 초기화
      var d = new Date();
      var hours = 24 - d.getHours();
      var min = 60 - d.getMinutes();
      var sec = 60 - d.getSeconds();
      //분이 있으면 시 반올림
      if(min =='00'){
          hours = 24 - d.getHours();
        }else{
          hours = 23 - d.getHours();
      }
      //초가 있으면 분 반올림        
      if(sec =='00'){
          min = 60 - d.getMinutes();
        }else{
          min = 59 - d.getMinutes();
      }
      //1자리수라면 0을 붙혀라
      if((hours + '').length == 1){
        hours = '0' + hours;
      }
      if((min + '').length == 1){
        min = '0' + min;
      }
      if((sec + '').length == 1){
        sec = '0' + sec;
      }
      //날짜를 표기하고 딜레이는 1초(1000)마다 바뀌겠금
      jQuery('#the-final-countdown p').html
          ('<span class="t_hour">'+hours+'</span>'+
           '<span class="t_colon">:</span>'+
           '<span class="t_min">'+min+'</span>'+
           '<span class="t_colon">:</span>'+
           '<span class="t_sec">'+sec+'</span>')
    }, 1000);
</script>
추천
10

댓글 7개

감사합니다.  게시판에 적용해보았습니다.
참 좋습니다. 감사합니다.
http://pws.co.kr/bbs/board.php?bo_table=js_latest&wr_id=44
전체 1,984 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT