在倒计时/定时器格式时间分钟和秒

Format time to minutes and seconds in countdown/timer

本文关键字：分钟 时间 格式 倒计时 定时器      更新时间：2023-09-26

我正在构建一个番茄时钟/倒计时，但有一个问题与格式选择的时间分钟/小时/秒。我试图将secs变量乘以60 (secs*=60)，但它弄得一团糟，我不知道如何修复它。所以，我希望它"知道"，它需要从25分钟倒计时-在25:00格式，或更多/更少(hh:mm:ss)，如果用户选择+和-按钮。非常感谢所有的帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
</head>
<body>
<h1 id="num">25 min</h1>
<div id="status"></div>
<button onclick='countDown(secs, "status")'>Start countdown</button>
<button onclick='increaseNumber()'>+</button>
<button onclick='decreaseNumber()'>-</button>
<script src="script.js"></script>
</body>
</html>

，这里是javascript:

var num = document.getElementById('num').innerHTML;
var secs = parseInt(num);
function countDown(secs, elem) {
    var element = document.getElementById(elem); 
    secs--;
      var timer = setTimeout(function() {
    countDown(secs, elem);
    }, 1000);
    //secs *= 60;
     if(secs%60 >= 10){ //10 - if it's not a single digit number
        document.getElementById('num').innerHTML = (Math.floor(secs/60) + ":" + secs%60);
    }
    else{
        document.getElementById('num').innerHTML = (Math.floor(secs/60) + ":" + "0" + secs%60);
    }
    element.innerHTML = "Please wait for "+secs+" minutes";
    //if timer goes into negative numbers
    if(secs < 1){
        clearTimeout(timer);
        element.innerHTML = '<h2>Countdown complete!</h2>';
        element.innerHTML += '<a href="#">Click here now</a>';
    }
}
function increaseNumber() {
    secs += 5;
    document.getElementById('num').innerHTML = secs + ' min';
}
function decreaseNumber() {
    if(secs >= 10) {
        secs -= 5;
        document.getElementById('num').innerHTML = secs + ' min';
    }
}

你为什么要手工做呢?如果您不介意使用库，moment.js可以很好地处理时间操作。它很轻，很容易使用。

如果你因为一些限制而不得不手工做，它们是什么?

参考:

//Creates a moment. Its value is the time of creation
var timer = moment();
//add 60 seconds to the timer
timer.add(60, 's');
//Removes 1 minutes from the timer
timer.subtract(1, 'm');

来源:

添加

减

试试这个countDown函数:

function countDown(secs, elem) {
    var element = document.getElementById(elem);
    element.innerHTML = "Please wait for "+secs+" minutes";
    var second = 0;
    var timer = setInterval(function(){
        var extraZero = second < 10 ? '0' : '';
        document.getElementById('num').innerHTML = secs + ":" + extraZero + second;
        if (second-- === 0) {
            second = 59;
            if (secs-- === 0){
                clearInterval(timer);
                element.innerHTML = '<h2>Countdown complete!</h2>';
                element.innerHTML += '<a href="#">Click here now</a>';
            }
        }
    }, 1000);
}

由于您正在倒数秒数，因此使用setInterval而不是setTimeout更有意义。

相关文章：