转换jQuery计时器并重定向到分钟和秒，而不是几秒钟

Question

我找到了这个基于jQuery的轻量级优秀计时器和重定向脚本，由＃39; jQuery by Example＆＃39;现场。该脚本在设定的秒数后重定向用户：

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

这里是小提琴：http://jsfiddle.net/jquerybyexample/2WmJb/

我正在尝试修改它以使用分钟和秒 - 有谁知道如何做到这一点？我曾尝试将HTML修改为25:00，但这似乎并不起作用（认为它不会那么简单！）。

非常感谢您的帮助...

Answer 1

最好在时间中使用数据属性并显示您想要的任何内容：

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

您可以使用.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。

基于注释的更改 - 为前导零添加填充函数

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选择器。此示例使用$span代替$("#spnSeconds")。 $前缀是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);
}