当倒计时为 02:30 时隐藏项目

Question

我有一个代码问题，我不知道如何在我的计时器到达 02:30 时隐藏项目。计时器在达到 0 时也会重置，我希望在计时器滴答 02:30 之前显示项目。谁能帮我处理代码？当计时器为 02:30

时，需要隐藏此 div

计时器从 03:00 滴答到 0 并重置。

当我刷新页面时，计时器会重新启动，如何解决？如何在重新加载页面时不重置 session、cookie 或 localStorage 时间？有人可以帮我吗？

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

jQuery(function($) {
  var threeMinutes = 60 * 3,
    display = $('#timer');
  startTimer(threeMinutes, display);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="timer" class="text-center" style="margin-top:100px;">03:00</h1>
<div class="alert alert-info">File List</div>
<div class="alert alert-info">File List</div>

Answer 1

当计时器到达 2:30 时隐藏项目：

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.text(minutes + ":" + seconds);

    $(".alert").toggle(timer >= 150)
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

jQuery(function($) {
  var threeMinutes = 60 * 3,
    display = $('#timer');
  startTimer(threeMinutes, display);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="timer" class="text-center" style="margin-top:100px;">03:00</h1>
<div class="alert alert-info">File List</div>
<div class="alert alert-info">File List</div>

带有 localStorage 的版本 - 此版本在不可见时停止计时器

<!DOCTYPE html>
<html>

<head>
  <title>Persist timer</title>
  <style>
    .alert {
      display: none
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    function startTimer(duration, display) {
      var timer = duration,
        minutes, seconds;
      setInterval(function() {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.text(minutes + ":" + seconds);

        $(".alert").toggle(timer >= 150); // show when 2:30
        if (--timer < 0) {
          timer = duration;
        }
        localStorage.setItem("timer", timer);

      }, 1000);
    }

    $(function() {
      const display = $('#timer');
      let threeMinutes = localStorage.getItem("timer"); // timer will continue from where it stopped but without elapsing while not running
      threeMinutes = threeMinutes ? +threeMinutes : 60 * 3
      startTimer(threeMinutes, display);
    });
  </script>

</head>

<body>
  <h1 id="timer" class="text-center" style="margin-top:100px;"></h1>
  <div class="alert alert-info">File List</div>
  <div class="alert alert-info">File List</div>
</body>

</html>

Answer 2

UPDATE 这是更新后的 fiddle，其中包括一个选项，可在达到 0 后自动重置计时器：https://jsfiddle.net/gawpsoy8/1/

这可能比您要求的要多，但这种逻辑最好分解成几个部分，即几个函数和几个变量。也就是说，通常限制引入到项目全局范围内的函数和变量的数量是一种很好的做法，因此在这种情况下，尝试封装它们是明智的。有几种选择，一种方法可能是创建一个 JavaScript class，它将以有组织的方式封装所有逻辑，并且只将一个名称引入全局名称空间（class 本身）。例如：

class Timer {
    constructor (opts) {
    this.duration = opts.duration
    this.ele = document.querySelector(opts.element)
    this.hideAt = opts.hideAt
    this.time = 0
    this.timer = null
  }
  
  startTimer () {
    clearInterval(this.timer)
    this.time = this.duration
    this.timer = setInterval(() => this.update(), 1000)
  }
  
  milliToMins (millis) {
    const minutes = Math.floor(millis / 60000)
    const seconds = ((millis % 60000) / 1000).toFixed(0)
    return minutes + ":" + (seconds < 10 ? '0' : '') + seconds
  }
  
  update () {
    this.time -= 1000
    this.ele.textContent = this.milliToMins(this.time)
    if (this.time === this.hideAt) this.ele.style.display = 'none'
  }
}

这有一个额外的好处，就是可以更自定义一些，因为您可以轻松地更改将显示计时器的元素、开始持续时间和隐藏该元素的时间，所有这些只需更新“选项”你在“实例化它”时传递给计时器，例如：

const myTimer = new Timer({
  element: '#timer',
  duration: 3 * 60 * 1000,
  hideAt: 2.5 * 60 * 1000
})

实例化后，您可以通过调用启动计时器：

myTimer.startTimer()

此外，值得注意的是，您实际上并不需要 jQuery（这就是为什么我将其写成 JavaScript）。

这是 js运行中的示例 fiddle：https://jsfiddle.net/gawpsoy8/

当倒计时为 02:30 时隐藏项目

Hide items when the countdown timer is 02:30

javascript

jquery

timer

jquery-events