时间戳

首页 > 解决方案 > 如何将计时器更改为记忆游戏的倒数计时器

javascript - 如何将计时器更改为记忆游戏的倒数计时器

问题描述

我有一个带有图像的记忆游戏的代码。我从这个链接中获取了游戏的参考：

记忆游戏

在这段代码中，游戏有一个时钟/计时器。我想将此计时器设置为设置为 10 分钟限制的时钟下降计时器。我不知道如何将此计时器更改为时钟停机时间。有人可以帮我解决这个问题。

// @description game timer
var second = 0,
  minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
var interval;

function startTimer() {
  interval = setInterval(function() {
    timer.innerHTML = minute + "mins " + second + "secs";
    second++;
    if (second == 60) {
      minute++;
      second = 0;
    }
    if (minute == 60) {
      hour++;
      minute = 0;
    }
  }, 1000);
}

//reset timer
second = 0;
minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
timer.innerHTML = "20 mins 0 secs";
clearInterval(interval);


startTimer();
<div class="timer">
</div>

有人可以告诉我如何将这个普通计时器更改为倒数计时器并帮助我解决这个问题。

标签： javascripthtmltimer

解决方案

试试这个。

var second = 0,
  minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
var interval;

function startTimer() {
  interval = setInterval(function() {
    timer.innerHTML = hour + " hr " + minute + " mins " + second + " secs";
    if (second == 0) {

      if (minute == 0) {
        hour--;
        minute = 60
      }
      minute--;
      second = 60
    }

    second--;
  }, 1000);
}

//reset timer
second = 0;
minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
timer.innerHTML = "0 hr 20 mins 0 secs";
clearInterval(interval);
startTimer()
<html>

<body>
  <div class="timer"></div>
</body>

</html>

推荐阅读