Countdown Timer

Discrete countdown timer that gets more obtrusive as it gets closer to 0.

by Puddster

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<body style="margin: 15px;">
    <div id="timer" class="timer well well-sm pull-right text-center" style="width: 120px;"> <small>Session Time:</small>

        <br /> <span></span>

    </div>
    <div>
        <button id="btnFullTime">Full Time</button>
        <button id="btnHalfTime">Half Time</button>
        <button id="btnQuarTime">1/4  Time</button>
        <button id="btn1MinTime">1min Time</button>
        <button id="btn10seTime">12s  Time</button>
    </div> <span id="help"></span>

</body>

JavaScript

var iMins, iSecs, oSecsTotal;


function countDown() {
    var sTimer;
    iSecs = iSecs - 1;
    if (iSecs === -1) {
        iMins = iMins - 1;
        iSecs = 59;
        if (iMins === -1) {
            $(".timer").html('<strong>Session expired!</strong><br />Please refresh<br /><div class="btn btn-danger btn-labeled"><div class="btn-label"><i class="fa fa-remove"></i></div>Close</div>').animate({
                width: "90%",
                height: "80%",
                left: "5%",
                top: "10%",
                paddingTop: "10%"
            });
            $(".timer").find("div.btn").click(function () {
                $(this).parents(".timer").hide();
            });
        }
    }
    sTimer = (iMins < 10 ? "0" + iMins : iMins) + ":" + (iSecs < 10 ? "0" + iSecs : iSecs);
    $(".timer").children("span").html(sTimer);
    if (iMins < 0) {
        return false;
    } else if (iMins * 60 + iSecs < 60) {
        $(".timer").fadeIn("slow").fadeTo("slow", 1).removeClass("well well-sm alert-warning").addClass("alert alert-danger")
            .children("span")
            .animate({
            fontSize: "1em"
        }, 400)
            .delay(100)
            .animate({
            fontSize: "1.5em"
        }, 400);
    } else if (iMins * 60 + iSecs < oSecsTotal / 4) {
        $(".timer").fadeIn("slow").fadeTo("slow", 1).removeClass("well well-sm").addClass("alert alert-warning");
    } else if (iMins * 60 + iSecs < oSecsTotal / 2) {
        $(".timer").fadeIn("slow").fadeTo("slow", 1);
    } else {
        $(".timer").fadeTo("show", 0.25);
    }
    setTimeout(function () {
        countDown();
    }, 1000);
}

$(document).ready(function () {
    iMins = 10,
    iSecs = 0,
    oSecsTotal = iMins * 60 + iSecs;
    
    setTimeout(function () {
        countDown();
    }, 1000);

    $("#btnFullTime").mouseenter(function () {
        $("#help").html("Sets the timer to full time (20 minutes)");
    }).mouseleave(function () {
       ...