倒数HH:MM:SS在Jquery

时间:2013-08-29 09:05:56

标签: javascript jquery countdown

我想以hh:mm:ss格式倒数计时器,所以我使用此代码将秒转换为所需格式,但当我倒计时它会显示NaN。你能告诉我我做错了吗? 这是代码

<div id="timer"></div>

JS

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10); // don't forget the second parm
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var time = hours + ':' + minutes + ':' + seconds;
    return time;
}

var count = '62';
count = count.toHHMMSS();

var counter = setInterval(timer, 1000);

function timer() {

    count--;
    if (count <= 0) {
        clearInterval(counter);
        return;
    }

    $('#timer').html(count);
}

这是JsFiddle链接CountDown Timer

2 个答案:

答案 0 :(得分:8)

好吧,让我们来看看你的代码做了什么:

  • count设置为字符串值62
  • 将其转换为HHMMSS,现在count等于字符串00:01:02
  • 启动计时器。
  • 在计时器首次运行时,递减count。嗯... count是一个字符串,你不能减少它。结果不是数字。

好的,就这样,修复它的方式如何:

function formatTime(seconds) {
    var h = Math.floor(seconds / 3600),
        m = Math.floor(seconds / 60) % 60,
        s = seconds % 60;
    if (h < 10) h = "0" + h;
    if (m < 10) m = "0" + m;
    if (s < 10) s = "0" + s;
    return h + ":" + m + ":" + s;
}
var count = 62;
var counter = setInterval(timer, 1000);

function timer() {
    count--;
    if (count < 0) return clearInterval(counter);
    document.getElementById('timer').innerHTML = formatTime(count);
}

答案 1 :(得分:2)

var count = '62'; // it's 00:01:02
var counter = setInterval(timer, 1000);
function timer() {
 if (parseInt(count) <= 0) {
    clearInterval(counter);
    return;
 }
 var temp = count.toHHMMSS();
 count = (parseInt(count) - 1).toString();
 $('#timer').html(temp);
}

http://jsfiddle.net/5LWgN/17/