Question

我有一个代码问题，我不知道如何在计时器达到02:30时隐藏项目。计时器在达到0时也会重置，我希望显示项目直到计时器滴答02:30。谁能帮我提供代码？计时器为02:30时需要隐藏此div

定时器从03:00滴答至0，然后重置。

当我刷新页面计时器时，该如何解决？重新加载页面后，如何设置会话，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

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

这可能比您要求的要多，但是最好将这种逻辑分为几部分，即一些功能和一些变量。就是说，优良作法是通常限制在项目的全局范围内引入的函数和变量的数量，因此在这种情况下，尝试对它们进行封装是明智的。有几种选择，一种方法可能是创建一个JavaScript 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编写的原因）。

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

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

2 个答案: