将 jQuery 计时器和重定向转换为使用分钟和秒，而不仅仅是秒

Question

我发现了这个基于 jQuery 的轻量级且出色的计时器和重定向脚本，由“jQuery by Example”站点创建。该脚本在设定的秒数后重定向用户：

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