时间戳

首页 > 解决方案 > 如何在 Jquery 中切换设置的间隔函数？

javascript - 如何在 Jquery 中切换设置的间隔函数？

问题描述

我正在尝试制作倒数计时器。当我按下数字 31（运行代码）时，我希望倒计时在开始和暂停之间切换。我该怎么做？ h1 元素上的另一个单击事件将不起作用。这是代码：

$(document).ready(function() {
  $('#clock').click(start)
});
var seconds = 60;
let interval;
let minutes, id;

function start(e) {
  id = e.target.id;
  minutes = Number(e.target.textContent) - 1;
  interval = setInterval(startTimer, 1000)
  console.log(id)
}

function startTimer() {
  seconds--;
  $(`#${id}`).text(minutes + ' : ' + seconds);
  if (seconds == 0) {
    seconds = 60;
    minutes--;
    if (minutes < 0) {
      clearInterval(interval);
      alert('time is up');
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>My Lab</title>
</head>

<body>
  <div class="container">
    <h1 id="clock">31</h1>
  </div>
</body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="app.js"></script>

</html>

标签： javascriptjqueryhtml

解决方案

$(document).ready(function() {
    $('#clock').click(start)
});
var seconds = 60;
let interval = null;
let minutes, id;

function start(e) {
    id = e.target.id;
    if (!minutes) {
        minutes = Number(e.target.textContent) - 1;
    }
    if (interval == null) {
        interval = setInterval(startTimer, 1000)
    } else {
        clearInterval(interval);
        interval = null;
    }
}

function startTimer() {
    seconds--;
    $(`#${id}`).text(minutes + ' : ' + seconds);
    if (seconds == 0) {
        seconds = 60;
        minutes--;
        if (minutes < 0) {
            clearInterval(interval);
            alert('time is up');
        }
    }
}
<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>My Lab</title>
</head>

<body>
  <div class="container">
    <h1 id="clock">31</h1>
  </div>
</body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="app.js"></script>

</html>

推荐阅读