没有获得 JS 功能

Posted

技术标签:

【中文标题】没有获得 JS 功能【英文标题】：Not getting JS Functionality 【发布时间】：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 我怎样才能把你为提问修改的输出图像放置 【参考方案1】：

您在函数范围内定义了您的 intervalID，因此您的 stop 函数无权访问它。

在外面定义。

let minutesEl = document.getElementById("minutes");
let secondsEl = document.getElementById("seconds");
let startBtnEl = document.getElementById("startBtn");
let stopBtnEl = document.getElementById("stopBtn");
let intervalId;

startBtnEl.onclick = function() 
    let counter = 0;
    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>

【讨论】：

好的先生，但是如何设置计时器应该重置为 00 分钟，一小时后 00 秒。 这是一个一小时的计时器。最长时间为一小时

以上是关于没有获得 JS 功能的主要内容，如果未能解决你的问题，请参考以下文章

为Nuxt.js部署云功能错误

python如何获得js执行之后的源代码，或者是谷歌浏览器“审查元素”得到的源代码？

如何获得带有选择/取消选择所有功能和不确定值的 angular.js 复选框？

为啥我们需要在 express.js 服务器上使用代理才能获得 webpack 热重载服务器功能与 react-routing 相结合

为啥我们需要在 express.js 服务器上使用代理才能获得与 react-routing 相结合的 webpack 热重载服务器功能

修改百度地图SearchInRectangle.js，去掉搜索功能，实现拖动搜索框时获得右下角坐标经纬度