Javascript 将倒计时/计时器中的时间格式化为分钟和秒
我正在构建一个pomodoro时钟/倒计时，但在将所选时间格式化为分钟/小时/秒方面存在问题。我曾尝试将secs变量乘以60（secs*=60），但这会造成混乱，我不知道如何修复它。因此，我想让它“知道”它需要从25分钟开始倒数-以25:00格式，或者如果用户选择使用+和-按钮，则需要更多/更少（hh:mm:ss）。非常感谢您的帮助Javascript 将倒计时/计时器中的时间格式化为分钟和秒,javascript,timer,countdown,countdowntimer,Javascript,Timer,Countdown,Countdowntimer,我正在构建一个pomodoro时钟/倒计时，但在将所选时间格式化为分钟/小时/秒方面存在问题。我曾尝试将secs变量乘以60（secs*=60），但这会造成混乱，我不知道如何修复它。因此，我想让它“知道”它需要从25分钟开始倒数-以25:00格式，或者如果用户选择使用+和-按钮，则需要更多/更少（hh:mm:ss）。非常感谢您的帮助 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
<!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>
25分钟
开始倒计时
+
-
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';
}
}
var num=document.getElementById（'num'）.innerHTML；
var secs=parseInt（num）；
功能倒计时（秒、元素）{
var元素=document.getElementById（elem）；
秒--；
var timer=setTimeout（函数（）{
倒计时（秒，元素）；
}, 1000);
//秒*=60；
if（secs%60>=10）{//10-如果不是一位数字
document.getElementById（'num'）.innerHTML=（Math.floor（secs/60）+“：”+secs%60）；
}
否则{
document.getElementById（'num'）.innerHTML=（Math.floor（secs/60）+“：“+”0“+secs%60）；
}
element.innerHTML=“请等待”+秒+“分钟”；
//如果计时器变成负数
如果（秒<1）{
清除超时（计时器）；
element.innerHTML='Countdown complete！'；
element.innerHTML+=''；
}
}
函数increaseNumber（）{
secs+=5；
document.getElementById（'num'）。innerHTML=secs+'min'；
}
函数decreaseNumber（）{
如果（秒>=10）{
secs-=5；
document.getElementById（'num'）。innerHTML=secs+'min'；
}
}
//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');
你用手做这件事有什么原因吗？ 如果你不介意使用一个库，在时间操作方面做得很好。它重量轻，使用方便 如果由于某些限制，您不得不手工操作，它们是什么 供参考：
//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');
尝试此
倒计时功能：
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);
}
功能倒计时（秒、元素）{
var元素=document.getElementById（elem）；
element.innerHTML=“请等待”+秒+“分钟”；
var秒=0；
var timer=setInterval（函数（）{
var extraZero=秒<10？'0'：''；
document.getElementById（'num'）.innerHTML=secs+“：”+extraZero+second；
如果（秒--==0）{
秒=59；
如果（秒--==0）{
清除间隔（计时器）；
element.innerHTML='Countdown complete！'；
element.innerHTML+=''；
}
}
}, 1000);
}
由于您正在倒计时秒数，因此使用setInterval
而不是setTimeout
尝试此倒计时
功能更有意义：
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);
}
功能倒计时（秒、元素）{
var元素=document.getElementById（elem）；
element.innerHTML=“请等待”+秒+“分钟”；
var秒=0；
var timer=setInterval（函数（）{
var extraZero=秒<10？'0'：''；
document.getElementById（'num'）.innerHTML=secs+“：”+extraZero+second；
如果（秒--==0）{
秒=59；
如果（秒--==0）{
清除间隔（计时器）；
element.innerHTML='Countdown complete！'；
element.innerHTML+=''；
}
}
}, 1000);
}
由于您正在倒数秒数，因此使用setInterval
而不是setTimeout
更有意义。谢谢您提供的链接，我将查看它。我是手工做的，因为我想更好地理解代码，所以我希望如果有办法做到这一点，谢谢链接，我会检查它。我手工做这件事是因为我想更好地理解代码，所以我希望有没有一种方法可以完全满足我的需要，如此简单有效，谢谢！S也许可以解释一下，如果（秒--==0）{second=59；如果（秒--==0）{part有效..我理解超零部分（如果second小于10，变量超零是“0”，如果它更大，它是空字符串“”）除非我弄错了。秒--==0和秒--==0的具体工作原理是什么？在setTimeout中，我有秒--它告诉函数倒计时，setInterval如何“查看”是吗？谢谢你again@JoesetTimeout
只触发一次，而setInterval
会在间隔内反复触发。在setInterval
函数中，second-->==0
会首先将second
与0
进行比较，然后运行second-->，而不管比较结果如何。我设置secondond
最初设置为0
，并在每个间隔中执行秒--
。当它达到0
时，它将设置为59
。同时，秒--==0
将运行以查看还剩多少分钟，并执行秒--
，无论比较结果如何。希望这有帮助！我现在明白了，如果我做对了，还有时间两个音程同时独立下降，而第二个音程实际上只是在循环。非常聪明，我学到了很多！谢谢！正是我所需要的，非常简单有效，谢谢！S也许可以解释一下如果（秒--==0）{second=59；如果（秒--==0）{part有效….我理解超零部分（如果second小于10，变量extraZero为“0”，如果它更大，则为空字符串“”），除非我弄错了。second--==0和secs--==0的具体工作原理是什么？在setTimeout中，我有secs--它告诉函数倒计时，setInterval如何“看到”它？谢谢again@JoesetTimeout
仅限f