javascript - 用 jQuery 倒计时

Question

所以，我从我的数据库中输出了这个:00:01:53
在 span 标签内

<span class="jb_timer">00:01:53</span>

所以我的问题是，如何使用 jQuery 让它倒计时？

谢谢。

Answer 1

这里有一些东西可以让您朝着正确的方向开始:

var remaining = $("span.jb_timer").text(),
    regex = /\d{2}/g,
    matches = remaining.match(regex),
    hours = matches[0],
    minutes = matches[1],
    seconds = matches[2],
    remainingDate = new Date();

remainingDate.setHours(hours);
remainingDate.setMinutes(minutes);
remainingDate.setSeconds(seconds);

var intvl = setInterval(function () {
    var totalMs = remainingDate.getTime(),
        hours, minutes, seconds;

    remainingDate.setTime(totalMs - 1000);

    hours = remainingDate.getHours();
    minutes = remainingDate.getMinutes();
    seconds = remainingDate.getSeconds();

    if (hours === 0 && minutes === 0 && seconds === 0) {
        clearInterval(intvl);
    }

    $("span.jb_timer").text(
        (hours >= 10 ? hours : "0" + hours) + ":" +
        (minutes >= 10 ? minutes : "0" + minutes)  + ":" +
        (seconds >= 10 ? seconds : "0" + seconds));

}, 1000);

工作示例: http://jsfiddle.net/andrewwhitaker/YbLj4/

注意事项:

• 首先，您必须从 span 的文本中解析出最初的小时、分钟和秒。使用简单的正则表达式执行此操作。
• 使用 setInterval 设置每 1000 毫秒运行一次的计时器。
• 当该计时器触发时，从时间中减去 1000 毫秒并适本地更新 span 的文本。
• 当时、分、秒为0时，清除(取消)间隔。