带有分钟,秒和毫秒的Javascript下降计时器

时间:2018-12-07 07:23:08

标签: javascript timer

我在互联网上进行了很多搜索,但找不到解决方法。

我想要一个按分钟,秒和毫秒降序排列的计时器。即05:59:999-> 5分钟59秒999毫秒。

下面是我的代码,只给我几分钟和几秒钟:

var countdownTimer = '';
var upgradeTime = 300; // total sec row from the table
var seconds = upgradeTime;

function timer() 
{
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;

    document.getElementById('timer1').innerHTML = pad(minutes) + " : " + pad(remainingSeconds);
    document.getElementById("timer1").style.border = "1px solid";
    document.getElementById("timer1").style.padding = "4px";
}

function pad(n) 
{
    return (n < 10 ? "0" + n : n);
}

$('#acstart').on('click', function(e)   // Start the timer
{
    clearInterval(countdownTimer);
    countdownTimer = setInterval('timer()', 1000);
});

我发现秒和毫秒的小提琴在这里是链接: http://jsfiddle.net/2cufprgL/1/

完成计时器后,我需要调用其他操作。

谢谢

3 个答案:

答案 0 :(得分:1)

使用您提供的小提琴,只需更新displayCount函数即可获得所需的结果。

function displayCount(count) {
    let res = Math.floor(count / 1000);
    let milliseconds = count.toString().substr(-3);
    let seconds = res % 60;
    let minutes = (res - seconds) / 60;

    document.getElementById("timer").innerHTML =
        minutes + ' min ' + seconds + ' s ' + milliseconds + ' ms';
}

请注意,您的小提琴具有正确的倒计时方法,每当计时器计时时,它都会测量剩余的实际时间,而不是假设计时器处于“准时”状态。

答案 1 :(得分:0)

我不会这么称呼。但是我确实使用了您的代码。我确实将其更改为递归setTimeout()

我所做的是调用间隔大于1000ms,设置特定的speed变量,然后在seconds变为0时检查标志时适当地减小seconds,然后调用此标志stopTimer()

var countdownTimer = '';
var upgradeTime = 3; // total sec row from the table
var seconds = upgradeTime;
var milliseconds = seconds * 1000;
var speed = 50; //interval speed

function timer() 
{
    milliseconds    = (seconds * 1000) - speed; //decrement based on speed
    seconds         = milliseconds / 1000; //get new value for seconds
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = (seconds % 60).toFixed(3);
    
    if(seconds <= 0){ stopTimer(); return; } //sets a flag here for final call
    
    document.getElementById('timer1').innerHTML = pad(minutes) + " : " + pad(remainingSeconds);
    document.getElementById("timer1").style.border = "1px solid";
    document.getElementById("timer1").style.padding = "4px";

    setTimeout('timer()', speed);
}

function stopTimer(){
    clearTimeout(countdownTimer);
    console.log("IT HAS BEEN DONE");
    document.getElementById('timer1').innerHTML = "00 : 00.000"
}

function pad(n) 
{
    return (n < 10 ? "0" + n : n);
}

clearTimeout(countdownTimer)
countdownTimer = setTimeout('timer()', speed);
<div id="timer1"></div>

答案 2 :(得分:0)

排序现在可以在逻辑上起作用。由于我正在尝试做,所以有点不稳定。 https://codesandbox.io/s/8xr1kx8r68

带有Countdown库的Momentjs-它有点过时且未维护,但看起来像您想要的那样。 https://github.com/icambron/moment-countdown http://countdownjs.org/readme.html