HTML

<div>
    <button type="button" onclick="start_timer()">시작</button>
    <button type="button" onclick="stop_timer()">종료</button>
</div>
<p class="counter">0</p>

<!--javascript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="cookie.js"></script>

JAVASCRIPT

var setimeout_var;
var timer_flag = 0;

function timer(){
    var time = new Date();
    var second = time.getTime() / 1000;
    count = second - getCookie('startSecond');
    $('.counter').text(parseInt(count));
    setimeout_var = setTimeout(timer, 1000);
}

function start_timer(){
    if(timer_flag == 0){
        var time = new Date();
        var second = time.getTime() / 1000;
        setCookie('startSecond', second, 7);
        timer_flage = 1;
        setTimeout(timer, 1000);
    }
}

function stop_timer(){
    deleteCookie('startSecond');
    clearTimeout(setimeout_var);
    clearTimeout(setimeout_var);
    clearTimeout(setimeout_var);
    timer_flage = 0;
    $('.counter').text('0');
}

REFERENCE

  1. 'cookie.js' 다운로드 링크

  2. 내용 설명

    • 1초 마다 0부터 숫자 증가