【发布时间】：2021-11-20 06:54:44
【问题描述】：
在这个每小时秒表动态 Web 应用程序中，我想使用 JS 实现给定的功能。下面是功能
计时器应该从 0 开始。
- 当点击 id 为
startBtn的 HTML 按钮元素时，应该启动计时器。 - 当单击 id 为
stopBtn的 HTML 按钮元素时， 计时器应该停止。 - 当在点击id为
stopBtn的HTML按钮元素之后点击id为startBtn的HTML按钮元素时，计时器应该恢复。 - 计时器应在一小时后重置为 00 分钟 00 秒。
注意：-这是一个一小时的计时器。最长为一小时。
这是输出图像：
下面是我试过的代码：
let minutesEl = document.getElementById("minutes");
let secondsEl = document.getElementById("seconds");
let startBtnEl = document.getElementById("startBtn");
let stopBtnEl = document.getElementById("stopBtn");
startBtnEl.onclick = function() {
let counter = 0;
let intervalId = setInterval(function(){
counter = counter + 1;
secondsEl.textContent = counter;
}, 1000);
};
stopBtnEl.onclick = function() {
clearInterval(intervalId);
};@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.timer {
font-size:36px
}
.button {
color:#ffffff;
border-radius: 4px;
padding:5px 15px;
border:none;
}
.bg-start-button {
background-color: #5cb85c;
}
.bg-stop-button {
background-color: #d9534f;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="text-center">
<p class="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>
</p>
<button class="bg-start-button button" id="startBtn">
Start
</button>
<button class="bg-stop-button button" id="stopBtn">
Stop
</button>
</div>
</body>
</html>【问题讨论】：
-
真正的问题/疑问是什么？ -> How do I ask a good question?
-
在您的问题中添加该信息，而不仅仅是在评论中（在有人询问您之后）。到目前为止，您还尝试过什么来自己解决这个问题？请每个问题只问一个问题/问题。
-
@Brian Tompsett 我怎样才能把你为提问修改的输出图像放置
标签： javascript dom dom-events javascript-objects