Question

点击START后，我对Pomodoro计时器中消失的秒数有疑问。

let countdown;

const timerDisplay = document.querySelector('.display_timer');
const start = document.querySelector('[data-action="start"]');
const restart = document.querySelector('[data-action="restart"]')

start.addEventListener('click', () => {
    if (countdown) return;
    timer(1500);
});

function timer(seconds) {
    const now = Date.now();
    const then = now + (seconds * 1000);


    countdown = setInterval(() => {
        const secondsLeft = Math.round((then - Date.now()) / 1000);
        if (secondsLeft < 0) {
          clearInterval(countdown);
          return;
          timer(1500);
        }
          display_timer(secondsLeft);
      }, 1000);
}
   
function display_timer(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}`;
    timerDisplay.textContent = display;
}
  
restart.addEventListener('click', () => {
    clearInterval(countdown);
    countdown = undefined;
    timerDisplay.textContent = '25:00';
  });

.display_timer {
    font-weight: 100;
    font-size: 20rem;
    margin: 0;
    color: black;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .control {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <title>pomodoro</title>
</head>
<body>
        <h1 class="display_timer">25:00</h1> 
        
        <div class="control">
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-action="start">START</button>   
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-action="restart">RESTART</button>
        </div>
        
    <script src="js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>

（也作为JSFiddle：https://jsfiddle.net/cqxn1Lwq/41/）

Answer 1

看起来像一个简单的拼写错误，改变

const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}`;

到

const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;

Answer 2

尝试格式化display_timer()功能中的显示时出错：

#>> const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}`;

您需要在测试后添加remainderSeconds：

const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`

＆＃13;

let countdown;

const timerDisplay = document.querySelector('.display_timer');
const start = document.querySelector('[data-action="start"]');
const restart = document.querySelector('[data-action="restart"]')

start.addEventListener('click', () => {
    if (countdown) return;
    timer(1500);
});

function timer(seconds) {
    const now = Date.now();
    const then = now + (seconds * 1000);


    countdown = setInterval(() => {
        const secondsLeft = Math.round((then - Date.now()) / 1000);
        if (secondsLeft < 0) {
          clearInterval(countdown);
          return;
          timer(1500);
        }
          display_timer(secondsLeft);
      }, 1000);
}
   
function display_timer(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
    timerDisplay.textContent = display;
}
  
restart.addEventListener('click', () => {
    clearInterval(countdown);
    countdown = undefined;
    timerDisplay.textContent = '25:00';
  });

＆＃13;

.display_timer {
    font-weight: 100;
    font-size: 20rem;
    margin: 0;
    color: black;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .control {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <title>pomodoro</title>
</head>
<body>
        <h1 class="display_timer">25:00</h1> 
        
        <div class="control">
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-action="start">START</button>   
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-action="restart">RESTART</button>
        </div>
        
    <script src="js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>

＆＃13;

Answer 3

您实际上并未向显示器添加秒数。除了0 /空前缀

之外，您还需要更改显示成本以包括秒值

function display_timer(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remaiderSecods}`;
    timerDisplay.textContent = display;
}

番茄钟 - 不显示秒数

3 个答案: