[教程] 使用 JavaScript 创建番茄钟

在本教程中，我们将创建一个番茄工作法时钟来帮助您跟踪处理不同任务所花费的时间。

结果

您可以在此处查看该项目的现场演示

任务

难度：初级/中级
工具：您选择的文本编辑器
持续时间：1-2小时
Github仓库：https://github.com/AlbertoMontalesi/InspiredWebDev-Tutorials/pomodoro-clock

这些是这个番茄钟的用户故事：

[ ] 用户可以启动/暂停/停止计时器
[ ] 用户可以编辑任务的标题
[ ] 用户可以看到已完成的番茄工作法列表
[ ] 用户可以自定义每次工作/休息时间的时长

现在我们知道了我们想要用这个番茄钟实现什么目标，让我们开始构建一个简单的 HTML 结构。

在Amazon和Leanpub上获取我的电子书

播放和暂停计时器

我们将首先创建一个简单的 HTML 结构来显示一个计时器，并添加按钮来启动、暂停和停止它。

 <div id="pomodoro-container">
  <div id="pomodoro-clock">
    <div id="pomodoro-timer"></div>
    <div id="pomodoro-clock-actions">
      <button id="pomodoro-start">Start</button>
      <button id="pomodoro-pause">Pause</button>
      <button id="pomodoro-stop">Stop</button>
    </div>
  </div>
</div>

现在我们有了基本结构，让我们开始在文件中处理我们的toggleClock功能script.js。

所有三个按钮都将调用该函数，并将启动、暂停或停止计时器。

首先，让我们为按钮附加一个事件监听器：

const pomodoroTimer = document.querySelector('#pomodoro-timer');

const startButton = document.querySelector('#pomodoro-start');
const pauseButton = document.querySelector('#pomodoro-pause');
const stopButton = document.querySelector('#pomodoro-stop');

// START
startButton.addEventListener('click', () => {
  toggleClock();
})

// PAUSE
pauseButton.addEventListener('click', () => {
  toggleClock();
})

// STOP
stopButton.addEventListener('click', () => {
  toggleClock(true);
})

我们将每个按钮存储在一个变量中，并为它们附加事件监听器。
如你所见，stopButton我们在函数中传递了一个参数toggleClock。稍后你就会明白为什么。

为了知道是否需要播放或暂停计时器，我们需要一个额外的变量，我们将调用该变量，isClockRunning默认情况下该变量将绑定到false。

let isClockRunning = false;

我们还需要一些变量来完成我们的初始设置：

// in seconds = 25 mins
let workSessionDuration = 1500;
let currentTimeLeftInSession = 1500;

// in seconds = 5 mins;
let breakSessionDuration = 300;

现在让我们开始编写我们的toggleClock函数。

 const toggleClock = (reset) => {
  if (reset) {
    // STOP THE TIMER
  } else {
    if (isClockRunning === true) {
      // PAUSE THE TIMER
      isClockRunning = false;
    } else {
      // START THE TIMER
      isClockRunning = true;
    }
  }
}

toggleClock接受一个参数，reset该参数仅在我们停止计时器时传递，否则我们将查看变量的值isClockRunning以查看是否需要播放或暂停计时器。

我们将利用内置方法setInterval来跟踪我们的计时器。

在else语句的正下方isClockRunning = true我们可以写：

clockTimer = setInterval(() => {
    // decrease time left / increase time spent
    currentTimeLeftInSession--;
}, 1000)

这样做的目的是每秒减少 1 个会话时间。

我们希望能够在单击暂停按钮时暂停此计时器，因此请继续将此代码添加到toggleClock上面的函数中isClockRunning = false：

clearInterval(clockTimer);

这将清除我们单击播放按钮时设置的计时器。

创建一个函数来格式化并显示时间

这个初始里程碑的最后一步是在我们的页面上显示计时器。

为此，我们将创建一个名为的函数，displayCurrentTimeLeftInSession该函数每秒都会从我们的计时器中调用一次。

首先，让我们在下面添加这一行，currentTimeLeftInSession--;这样我们setInterval看起来就像这样

clockTimer = setInterval(() => {
  currentTimeLeftInSession--;
  displayCurrentTimeLeftInSession();
}, 1000);

现在，在我们的toggleClock功能下，让我们创建一个新的功能：

const displayCurrentTimeLeftInSession = () => {
  const secondsLeft = currentTimeLeftInSession;
  let result = '';
  const seconds = secondsLeft % 60;
  const minutes = parseInt(secondsLeft / 60) % 60;
  let hours = parseInt(secondsLeft / 3600);
  // add leading zeroes if it's less than 10
  function addLeadingZeroes(time) {
    return time < 10 ? `0${time}` : time
  }
  if (hours > 0) result += `${hours}:`
  result += `${addLeadingZeroes(minutes)}:${addLeadingZeroes(seconds)}`
  pomodoroTimer.innerText = result.toString();
}

哇，我敢打赌你一定对这个功能措手不及，但别担心，它并不像看起来那么复杂。

由于我们以秒为单位存储计时器，因此我们需要一种方法来格式化它，以便用户可以看到分钟和秒，而不仅仅是秒。

这个符号%被称为余数，您可以在这里阅读更多相关信息。

它的作用是返回第一个操作数和第二个操作数相除后的余数。

例子：

const x = 70;
x % 60;
// 10

现在想象一下x我们的secondsLeft.70秒本质上意味着1分10秒。

正如您所见，通过使用% 60我们得到了要显示的秒数。

下一步是获取计时器中剩余的分钟数，我们可以这样做：

const minutes = parseInt(secondsLeft / 60) % 60;

这将返回 1。

最后一步是像这样计算小时数：

let hours = parseInt(secondsLeft / 3600);

3600 是一小时内的秒数。

合适的时钟应以这种格式显示时间：“07:08”，因此我们需要一种方法在分钟或秒小于 10 时添加前导零。

function addLeadingZeroes(time) {
  return time < 10 ? `0${time}` : time
}

这种语法可能会让初学者感到困惑，但这就是所谓的三元运算符，它实际上非常简单且易于使用。

return time < 10 ? `0${time}` : time

每次在 '?' 之前都会进行评估，在本例中是“时间是否小于 10？”，并且 '?' 和 ':' 之间的第一部分是在答案为 YES 时返回的内容，而 ':' 之后的代码是在答案为 NO 时返回的内容。

用纯文本来说：“如果时间小于 10，则返回前面带有零的时间（例如：09 而不是 9），如果时间大于 10，则直接返回它”。

代码的最后一部分只是通过将小时（如果有）、分钟和秒插入在一起来创建一个字符串。

if (hours > 0) result += `${hours}:`
result += `${addLeadingZeroes(minutes)}:${addLeadingZeroes(seconds)}`

如果您不知道这是什么意思，您可以在这里${}阅读有关字符串插值的更多信息。

简而言之，它允许我们将变量和纯文本一起写入，而不必不断地用加号将字符串相互添加。

一旦我们有了格式良好的字符串来表示计时器中剩余的时间，就可以使用以下简单的代码行将其添加到我们的页面中：

pomodoroTimer.innerText = result;

您可以通过此链接继续阅读本教程

鏂囩珷鏉ユ簮锛�https://dev.to/albertomontalesi/tutorial-create-a-pomodoro-clock-with-javascript-13om