Warning Timer

1st Blue 2nd Yellow 3rd Red

by nijinvinodan

HTML

<div class="timer" id="timer">00:00</div>
<br/>
<input type="button" onclick="startTimer()" value="START" />
<input type="button" onclick="resetTimer()" value="BID NOW" />
<script>
    var timer;
    var i = 0;
    var interval = 15;

    function startTimer() {
        timer = setInterval(function() {
            document.getElementById("timer").innerHTML = "00:" + giveValue("" + (++i) % interval);
            if (i == (3 * interval)) {
                document.getElementById("timer").innerHTML = "TIME UP";
                clearTimeout(timer);
            } else if (i < interval) {
                document.getElementById("timer").style.background = "lightskyblue";
            } else if (i < (2 * interval)) {
                document.getElementById("timer").style.background = "yellow";
            } else if (i < (3 * interval)) {
                document.getElementById("timer").style.background = "red";
            }
        }, 1000);
    }

    function resetTimer() {
        i = 0;
    }

    function giveValue(val) {
        if (val.length == 1) return "0" + val;
        else return val;
    }
</script>

CSS

.timer {
    width:100px;
    text-align:center;
    padding:10px;
    background:lightskyblue;
    color:#000;
    font-size:24px;
}