如何在倒计时计时器JavaScript中显示毫秒

Question

我有一段JavaScript代码，可以显示一个从5分钟开始倒计时的计时器。

这是代码：

var mins
var secs;

function cd() {
    mins = 1 * m("05"); // change minutes here
    secs = 0 + s(":00"); // change seconds here (always add an additional second to your total)
    redo();
}

function m(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(0, i));
}

function s(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
    var disp;
    if(mins <= 9) {
        disp = " 0";
    } else {
        disp = " ";
    }
    disp += mins + ":";
    if(secs <= 9) {
        disp += "0" + secs;
    } else {
        disp += secs;
    }
    return(disp);
}

function redo() {
    secs--;
    if(secs == -1) {
        secs = 59;
        mins--;
    }

     var timerStr = dis(mins,secs); 
    $("#countDownTimer").text(timerStr);  // setup additional displays here.
    if((mins == 0) && (secs == 0)) {

    } else {
        cd = setTimeout("redo()",1);
    }


}

function init() {
  cd();
}

window.onload = init;

我该如何修改脚本以显示毫秒？

或者，是否有一种简单的脚本可以显示倒计时计时器，包括分钟：秒：毫秒？

- Linto

---

可能是重复的问题，参考 jQuery 1分钟倒计时带毫秒和回调，另请参阅 显示毫秒的javascript倒计时。 - Matt Ball

Answer 1

你正在调用timeout并传递了参数1，这意味着每个计时器事件为1毫秒，但在redo()函数中，你将该毫秒事件视为完整的一秒。

redo()应为：

function redo() {
   s -= 0.001; // subtract 1 millisecond
   if (s < 0) {
      secs = 59.999;
      mins--;
   }
}

等等。然而，每毫秒运行此代码将对浏览器造成相当大的负载，并且不会以精确的毫秒精度运行。您应该做的是跟踪时间 - 当您启动倒计时时，使用具有毫秒精度的Date()对象记录当前系统时间。

在比毫秒长的时间间隔（例如，每200ms / 0.2秒）调用redo()，然后从该点的系统时间减去计时器的开始时间。

- Marc B

---

我需要显示毫秒。代码有一个小改变，即我每秒钟调用一次函数，例如cd = setTimeout("redo()",1000);。那么我们应该怎么改变呢？谢谢你的建议。 - Linto

JS Date对象拥有毫秒：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date - Marc B

Answer 2

我修改了代码以包含毫秒。还要确保setTimer设置正确。

var mins
var secs;
var ms;

function cd() {
    mins = 1 * m("05"); // change minutes here
    secs = 0 + s(":00"); // change seconds here (always add an additional second to your total)
    ms = 0 + ms(":00");//change millisecons here
    redo();
}

function m(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(0, i));
}

function s(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function ms(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs,ms) {
    var disp;
    if(mins <= 9) {
        disp = " 0";
    } else {
        disp = " ";
    }
    disp += mins + ":";
    if(secs <= 9) {
        disp += "0" + secs;
    } else {
        disp += secs + ":";
    }
    if(ms <= 9) {
        disp += "0" + ms;
    } else {
        disp += ms;
    }
    return(disp);
}

function redo() {
    ms--;
    if(ms == -1) {
        ms = 99;
        secs--;
    }
    if(secs == -1) {
        secs = 59;
        mins--;
    }

     var timerStr = dis(mins,secs,ms); 
    document.getElementById('countdown_fld').innerText=timerStr;  // setup additional displays here.
    if((mins == 0) && (secs == 0) && (ms == 0)) {

    } else {
        cd = setTimeout("redo()",10); //make sure to set the timer right
    }


}

function init() {
  cd();
}

- nisr.com

---

是的，我的代码有一个小改变，函数每秒钟调用一次，即cd = setTimeout("redo()",1000); - Linto

谢谢你的帮助，请问毫秒应该是000对吗？因为1000毫秒等于1秒。 - Linto

再次感谢。但它显示的倒计时是从10毫秒开始的。应该是从1000毫秒开始吧？ - Linto

那么你的意思是毫秒从1000本身开始计数吗？ - Linto

非常感谢，你能把它改成05:00:999吗？那应该是正确的吧？ - Linto

Answer 3

你可以考虑使用已有的jQuery倒计时插件之一，例如http://keith-wood.name/countdown.html或http://code.google.com/p/jquery-countdown/。

---

经进一步检查：

• 使用毫秒和回调的jQuery 1分钟倒计时
• 显示毫秒的javascript倒计时

- Matt Ball

---

但是有显示毫秒的选项吗？ - Linto

查看我的编辑。通常来说，答案是否定的，但根据我链接的第一个答案，这可能是件好事。 - Matt Ball