【每日一练】211—番茄计时器

每日一练11个月前更新 admin
1,160 0

第211练最终效果:

【每日一练】211—番茄计时器

练习的最终代码:

HTML:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>211练-番茄计时器</title>
    <link rel=”stylesheet” href=”index.css”>
</head>
<body>
    <div class=”container”>
        <h1 class=”title”>番茄计时器</h1>
        <p class=”timer” id=”timer”>25:00</p>
        <div class=”button-wrapper”>
            <button id=”start”>开始</button>
            <button id=”stop”>停止</button>
            <button id=”reset”>重置</button>
        </div>
    </div>
    <script src=”index.js”></script>
</body>
</html>

CSS:

.container {
    margin: 0 auto;
    max-width: 400px;
    text-align: center;
    padding: 20px;
    font-family: “Roboto”, sans-serif;
  }
  .title {
    font-size: 36px;
    margin-bottom: 10px;
    color: #2c3e50;
  }
  .timer {
    font-size: 72px;
    color: #2c3e50;
  }
  button {
    font-size: 18px;
    padding: 10px 20px;
    margin: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: opacity 0.3s ease-in-out;
  }
  button:hover {
    opacity: 0.7;
  }
  #start {
    background-color: #27ae60;
  }
  #stop {
    background-color: #c0392b;
  }
  #reset {
    background-color: #7f8c8d;
  }

JS:

const startEl = document.getElementById(“start”);
const stopEl = document.getElementById(“stop”);
const resetEl = document.getElementById(“reset”);
const timerEl = document.getElementById(“timer”);
let interval;
let timeLeft = 1500;
function updateTimer() {
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let formattedTime = `${minutes.toString().padStart(2, “0”)}:${seconds
    .toString()
    .padStart(2, “0”)}`;
  timerEl.innerHTML = formattedTime;
}
function startTimer() {
  interval = setInterval(() => {
    timeLeft–;
    updateTimer();
    if (timeLeft === 0) {
      clearInterval(interval);
      alert(“Time’s up!”);
      timeLeft = 1500;
      updateTimer();
    }
  }, 1000);
}
function stopTimer() {
  clearInterval(interval);
}
function resetTimer() {
  clearInterval(interval);
  timeLeft = 1500;
  updateTimer();
}
startEl.addEventListener(“click”, startTimer);
stopEl.addEventListener(“click”, stopTimer);
resetEl.addEventListener(“click”, resetTimer);
© 版权声明

相关文章

暂无评论

暂无评论...