메뉴 건너뛰기

조회 수 81315 추천 수 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;
}



List of Articles
번호 제목 날짜 조회 수
99 jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 2019.01.10 1211
98 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2019.01.10 1081
97 jQuery 로 원하는 갯수만큼 checkbox 선택하기 2019.01.10 1019
96 jQuery 로 탭메뉴 보였다 안보였다 맹글기 2019.01.10 1327
95 jQuery 로 탭메뉴 2019.01.10 938
94 스크롤 최하단 자동 포커스(auto scroll to bottom of page with jquery) 2018.11.07 1571
» jquery timer, javascript countdown (타이머 예제) 2018.11.07 81315
92 Hide pager if bxslider has only 1 slide 2018.11.07 1294
91 Magnific popup conflict with "jquery.nicescroll" file 2018.11.07 1314
90 터치 디바이스 분기처리 2018.11.07 1273
89 중복 없는 랜덤 2018.11.07 2016
88 3D Perspective Carousel with jQuery and CSS3 - CSSSlider 2018.11.07 1388
87 iframe height auto resize 2018.11.07 1400
86 getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드 2018.11.07 1297
85 비활성화 된 라디오버튼 클릭 시 경고창 생성 2018.11.07 1392
84 특정영역 제외하고 body 클릭 2018.09.28 3605
83 따욤표 중복으로 출력하기 2018.09.28 1884
82 [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2018.09.27 2551
81 [jQuery] split, join 으로 공백제거 하기 2018.09.06 2146
80 [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기 2018.09.06 1813
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved