zxWwOM

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<div id="timerDiv" class="timerDiv">123</div>

<input id="triggerTimer" type="button" value="timer" />

script.js

// time formatter
function secondsToMinSecs(t) {

    var mLen = t >= 600 ? 2 : 1;

    var m = ("0" + Math.floor(t / 60) % 60).slice(-mLen),
        s = ("0" + t % 60).slice(-2);
    return m + ":" + s;
}


function runTimer(duration, displayElement, formatter, callback) {

    // default message for callback
    var msg = "done";

    // Adjust to account for delay interval
    var runTime = duration - 1;

    // used to track true elapsed time if user leaves browser
    var initiatedTime = Math.round(new Date().getTime() / 1000);

    // Display initial time
    displayElement.html(formatter(duration));


    // Clear interval so timer can restart properly
    if (displayElement.data("timerID") !== undefined) {

        clearInterval(displayElement.data("timerID"));
    }

    var timerID = setInterval(function () {

        var currentTime = Math.round(new Date().getTime() / 1000);

        // Always check the elapsed real time to see if the timer
        // needs to be adjusted, i.e. if browser was suspended
        if (duration - runTime < currentTime - initiatedTime) {

            // Check that the elapsed real time hasn't exceeded the overall duration!
            if ((currentTime - initiatedTime) < duration) {

                runTime = duration - (currentTime - initiatedTime);
            } else {

                runTime = -1; // auto-expiration!
                msg = "expired";
            }
        }

        if (runTime < 0) {

            clearInterval(timerID);

            // Just in case, set the timer display to zero
            displayElement.html(formatter(0));

            // Pass message to callback
            callback(msg);

            return;
        }

        displayElement.html(formatter(runTime));

        runTime--;
    }, 1000);

    // Assign the interval id to the display element so 
    // it can be cleared if necessary e.g. on a restart
    displayElement.data("timerID", timerID);
}


function myCallback(msg) {

    alert("callback message: " + msg);
}


$("#triggerTimer").click(function () {

    runTimer(10, $("#timerDiv"), secondsToMinSecs, myCallback);
});

style.css

.timerDiv {
   
    color: #ff4b00;
    font-size: 2em;
    font-weight: bold;
    padding: .4em .2em .22em .4em;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
}

zxWwOM.markdown

zxWwOM

A Pen by Jon Nehring on CodePen.

License.