Timer Component

by kthornbloom

HTML

<div class="timer">
    <div class="time-block time-hr">
        00
    </div>
    <div class="time-block time-min">
        00
    </div>
    <div class="time-block time-sec">
        04
    </div>
</div>

CSS

body {
    background: #222;
    color: #fff;
}

.timer {
    display: inline-block;
    color: #fff;
    font-size: .8em;
    position: relative;
    top: 5px;
}

.timer-done {
    color: tomato;
}

.time-block {
    border: 1px solid #6d7077;
    border-radius: 4px;
    font-size: 1.2em;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    line-height: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.time-block:after {
    content: '';
    color: #6d7077;
    font-size: 10px;
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 50px;
    text-align: center;
}

.time-block-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.time-block:nth-child(1):after {
    content: 'Hour'
}

.time-block:nth-child(2):after {
    content: 'Min'
}

.time-block:nth-child(3):after {
    content: 'Sec'
}

JavaScript

// Function to handle the animation
function animateTimer(num, element) {
    $(element + ' div').stop(true, true).animate({
        top: '100%'
    }, 250, function() {
        $(element + ' div').css('top', '-100%').html(num);
        $(element + ' div').animate({
            top: '0%'
        }, 250);
    });
}

// Determine if the timer is on the page
if ($('.timer').length) {

    $('.time-block').each(function() {
        // Add some wrapper divs to animate
        $(this).wrapInner('<div class="time-block-content"></div>');
    });

    setInterval(function() {

        // Seconds
        var getSec = parseInt($('.time-sec div').html(), 10),
            getSec = getSec - 1,
            getMin = parseInt($('.time-min div').html(), 10),
            getHr = parseInt($('.time-hr div').html(), 10);
        if (getMin <= 0 && getHr <= 0 && getSec <= -1) {
            // Timer Done
            $('.timer').addClass('timer-done');
        } else if (getSec <= -1) {
            animateTimer('59', '.time-sec');
        } else if (getSec < 10) {
            var getSec = '0' + getSec;
            animateTimer(getSec, '.time-sec');
        } else {
            animateTimer(getSec, '.time-sec');
        }
		
		// Minutes
		var getSec = parseInt($('.time-sec div').html(), 10),
            getMin = parseInt($('.time-min div').html(), 10),
			getMin = getMin - 1,
            getHr = parseInt($('.time-hr div').html(), 10);
		if (getHr <= 0 && getMin <= -1) {
            // Timer Done
        } else if (getMin <= -1 && getSec == 0) {
            animateTimer('59', '.time-min');
        } else if (getMin < 10 && getSec == 0) {
            var getMin = '0' + getMin;
            animateTimer(getMin, '.time-min');
        } else if (getSec == 0) {
            animateTimer(getMin, '.time-min');
        }
		
		// Hours
		var getSec = parseInt($('.time-sec div').html(), 10),
            getMin = parseInt($('.time-min div').html(), 10),
            getHr = parseInt($('.time-hr...