在倒数/计时器中将时间格式化为分钟和秒

Question

I am building a pomodoro clock/countdown, but have an issue with formatting selected time to minutes/hours/seconds. 我正在建立番茄时钟/倒计时，但是将所选时间格式化为分钟/小时/秒有问题。 I have tried to multiply the secs variable with 60 (secs*=60), but it makes a mess and I can't figure out how to fix it. 我试图将secs变量乘以60（secs * = 60），但结果一团糟，我不知道该如何解决。 So, I would like it to "know" that it needs to count down from 25 minutes - in 25:00 format, or more/less(hh:mm:ss) if the user chooses so with + and - buttons. 因此，我希望它“知道”它需要从25分钟开始倒计时（采用25:00格式），如果用户使用+和-按钮选择这样做，则需要更多/更少（hh：mm：ss）。 All help very appreciated 所有帮助非常感谢

<!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>

and here is javascript: 这是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';
    }
}

Answer 1

Is there a reason you're doing it by hand ? 您有理由手工做吗？ If you don't mind using a library, moment.js does a very good job at time manipulations. 如果您不介意使用库，那么moment.js在时间操作方面做得非常好。 It's lightweight and very easy to use. 它轻巧且易于使用。

If you have to do it by hand because of some limitations, what are they ? 如果由于某些限制您必须手动操作，它们是什么？

For reference: 以供参考：

//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');

Sources : 资料来源：

Add 加

Substract 减去

Answer 2

Try this countDown function: 试试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);
}

Since you are counting down the seconds, it is making more sense to use setInterval instead of setTimeout . 由于您正在计算秒数，因此使用setInterval代替setTimeout更有意义。

在倒数/计时器中将时间格式化为分钟和秒

问题描述

2 个解决方案

解决方案1
3 2016-09-23 11:59:57

解决方案2
1 已采纳 2016-09-23 13:41:26

在倒数/计时器中将时间格式化为分钟和秒

问题描述

2 个解决方案

解决方案1 3 2016-09-23 11:59:57

解决方案2 1 已采纳 2016-09-23 13:41:26

解决方案1
3 2016-09-23 11:59:57

解决方案2
1 已采纳 2016-09-23 13:41:26