Convert jQuery timer and redirect to work with minutes and seconds, rather than just seconds

html, javascript, jquery

Solution

Best to use a data attribute for the time and display whatever you want as the text:

JSFiddle: http://jsfiddle.net/2WmJb/67/

You can access the data attribute with either `.data('time')` or `.attr('data-time')`

<h1>You will be redirect to actual page after <span id="spnSeconds" data-time="1500000">25 minutes</span></h1>

$(document).ready(function () {
    window.setInterval(function () {
        var iTimeRemaining = $("#spnSeconds").data('time');
        iTimeRemaining = ~~iTimeRemaining;
        if (iTimeRemaining == 0) {
            location.href = "http://jquerybyexample.blogspot.com/";
        } else {
            var mins = ~~(iTimeRemaining / 60000);
            $("#spnSeconds").html(mins + " minutes " + ~~(iTimeRemaining / 1000 % 60) + " seconds");
            $("#spnSeconds").data('time', iTimeRemaining - 1000);
        }
    }, 1000);
});

Also `Eval` is `Evil` in most cases. Do a simple `~~` to coerce the value to an integer value, or use `parseInt`.

Changes Based on comment - add a pad function for leading zeroes

JSFiddle: http://jsfiddle.net/2WmJb/69/

function pad(num, size) {
    var s = "000000000" + num;
    return s.substr(s.length-size);
}

$(document).ready(function () {
    window.setInterval(function () {
        var iTimeRemaining = $("#spnSeconds").data('time');
        iTimeRemaining = ~~iTimeRemaining;
        if (iTimeRemaining == 0) {
            location.href = "http://jquerybyexample.blogspot.com/";
        } else {
            var mins = ~~(iTimeRemaining / 60000);
            $("#spnSeconds").html(mins + ":" + pad(~~(iTimeRemaining / 1000 % 60),2));
            $("#spnSeconds").data('time', iTimeRemaining - 1000);
        }
    }, 1000);
});

One final cleanup: http://jsfiddle.net/2WmJb/70/

Although not really significant when using jQuery `id` selectors (as they are very fast compared to say class selectors), you should reuse variables instead of repeatedly calling jQuery selectors. This example uses `$span` instead of `$("#spnSeconds")`. The $ prefix is a typical prefix for your variables that are jQuery objects (and more readable):

var $span = $("#spnSeconds");
var iTimeRemaining = $span.data('time');
iTimeRemaining = ~~iTimeRemaining;
if (iTimeRemaining == 0) {
    location.href = "http://jquerybyexample.blogspot.com/";
} else {
    $span.html(~~(iTimeRemaining / 60000) + ":" + pad(~~(iTimeRemaining / 1000 % 60),2));
    $span.data('time', iTimeRemaining - 1000);
}

Problem

Original source