메뉴 건너뛰기

조회 수 81453 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
function dailyMissionTimer(duration) {
    
    var timer = duration * 3600;
    var hours, minutes, seconds;
    
    var interval = setInterval(function(){
        hours	= parseInt(timer / 3600, 10);
        minutes = parseInt(timer / 60 % 60, 10);
        seconds = parseInt(timer % 60, 10);
		
        hours 	= hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
		
        $('#time-hour').text(hours);
        $('#time-min').text(minutes);
        $('#time-sec').text(seconds);

        if (--timer < 0) {
            timer = 0;
            clearInterval(interval);
        }
    }, 1000);
}

dailyMissionTimer(24);	// hour base


<span id="time-hour"></span>
<span id="time-min"></span>
<span id="time-sec"></span>


function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "countdown's over!";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

countdown( "countdown", 1, 5 );
countdown( "countdown2", 100, 0 );

<div id="countdown"></div>
<div id="countdown2"></div>

div {
    color: #1B232F;
    font-family: Verdana, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}



  1. No Image 07Nov
    by 조쉬
    2018/11/07 Views 81453 

    jquery timer, javascript countdown (타이머 예제)

  2. No Image 22Dec
    by
    2016/12/22 Views 49605 

    jquery 플러그인 링크 모음

  3. No Image 21Sep
    by
    2016/09/21 Views 14374 

    동적으로 콤보(select)의 항목(option) 생성하기

  4. 이미지 클릭시 확대하기

  5. jqGrid / custom pager / custom paging / 그리드 / 페이징

  6. No Image 25Mar
    by
    2021/03/25 Views 12227 

    Ajax를 통해 전송된 데이터를 Controller에서 List 객체로 받기

  7. No Image 02Mar
    by
    2017/03/02 Views 11799 

    jQuery 입문: form 데이터 유효성 검사

  8. No Image 21Sep
    by
    2016/09/21 Views 11535 

    속성선택자를 이용해서 링크에 스타일 입히기

  9. Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용)

  10. No Image 02Mar
    by
    2017/03/02 Views 10558 

    jquery 이용한 필수입력체크(input form)

  11. No Image 22Dec
    by
    2016/12/22 Views 10484 

    셀렉트박스에서 특정 옵션 선택시 레이어 나타내기

  12. No Image 22Dec
    by
    2016/12/22 Views 10110 

    bxslider 멈춤현상

  13. No Image 17Nov
    by
    2016/11/17 Views 10055 

    jQuery 날짜 비교 (날짜비교)

  14. No Image 17Nov
    by
    2016/11/17 Views 10044 

    jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅

  15. No Image 09Sep
    by
    2016/09/09 Views 9489 

    각종 다이어그램 플러그인 / 차트 / 관계 플러그인

  16. No Image 21Sep
    by
    2016/09/21 Views 9202 

    POST 방식으로 인수를 전달하고 그 결과를 받아오기

  17. No Image 21Sep
    by
    2016/09/21 Views 9065 

    select box 값 변경, 목록 변경

  18. No Image 06Mar
    by
    2017/03/06 Views 9028 

    파일 업로드 방법, 이미지 파일 업로드 예제 소스

  19. No Image 11Sep
    by
    2016/09/11 Views 8876 

    [jQuery] 이용 아이디 중복체크 실시간

  20. No Image 17Nov
    by
    2016/11/17 Views 8835 

    jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved