Convert jQuery timer and redirect to work from minutes and seconds, not just seconds

Question

I found this easy and great timer and redirected a script based on jQuery created on the jQuery by Example site . The script redirects the user after a specified number of seconds:

HTML:

<h1>You will be redirect to actual page after <span id="spnSeconds">10000</span> seconds.</h1>

JQuery

$(document).ready(function () {
    window.setInterval(function () {
        var iTimeRemaining = $("#spnSeconds").html();
        iTimeRemaining = eval(iTimeRemaining);
        if (iTimeRemaining == 0) {
            location.href = "http://jquerybyexample.blogspot.com/";
        } else {
            $("#spnSeconds").html(iTimeRemaining - 1);
        }
    }, 1000);
});

Here's the fiddle: http://jsfiddle.net/jquerybyexample/2WmJb/

I am trying to change it to work from minutes and seconds - does anyone know how to do this? I tried just modifying the HTML until 25:00, but that didn't seem to work (thought it wasn't that easy!).

Many thanks for your help...

Answer 1

data , , :

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

data .data('time') .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);
});

Eval Evil. ~~, parseInt.

- pad

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);
});

: http://jsfiddle.net/2WmJb/70/

jQuery id ( ), jQuery. $("#spnSeconds") $span. $ , jQuery ( ):

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);
}