Countdown timer

by mrjordy

HTML

<span>Lunch ends in</span><div id="countdown"></div>
<div class="hide">

<span>Until next subject</span><div id="countdown2"></div></div>

CSS

body {background: black;}
div {
    color: #1B232F;
    font-family: Verdana, Arial, sans-serif;
    font-size: 180px;
    font-weight: bold;
    text-decoration: none;
    color: white;
}
span {
  font-size: 60px;
font-family: Verdana, Arial, sans-serif;
color: grey;
}
.hide {display: none;}

JavaScript

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 = "back to work!";
        } 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", 29, 59 );
countdown( "countdown2", 100, 0 );