Реализация таймера обратного отсчета MM: SS в JS? - PullRequest
Новая
       41

Реализация таймера обратного отсчета MM: SS в JS?

0 голосов
/ 29 апреля 2020

Я пытаюсь реализовать таймер обратного отсчета в формате MM: SS, где 03:00 будет уменьшаться до 02:59 и т. Д.

Когда пользователь выбирает значение параметра 60, 180, или 300 секунд (1, 3, 5 минут), таймер будет установлен на это значение и будет отсчет каждую секунду. 

function qs(selector) {
  return document.querySelector(selector);
}
function startTimer() {
  let timer = qs("select");
  remainingSeconds = timer.options[timer.selectedIndex].value;
  let timerDisplay = formatTimer(remainingSeconds);
  qs("#time").innerHTML = timerDisplay;

  timerId = setInterval(advanceTimer, 1000);
}

function formatTimer(remainingSeconds) {
  let minutes = Math.floor(remainingSeconds / 60);
  let seconds = remainingSeconds % 60;

  if (minutes < 10) {
    minutes = "0" + minutes;
  }

  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  return minutes + ":" + seconds;
}

function advanceTimer() {
  if (remainingSeconds = 0) {
    clearInterval(timerId);
    //end the game logic here
    console.log("times up!");
  } else {
    qs("#time").innerHTML = remainingSeconds--;
  }
}

window.onload = function(){
  startTimer();
}
<select>
 <option selected>30
 <option>60
</select>

<div id="time"></div>

Прямо сейчас поведение таймера, например, заключается в том, что он начинается с 3:00, а затем через 1 секунду уменьшается до 00:00. Как я могу настроить поведение моих функций так, чтобы оно уменьшалось до ожидаемого результата.

1 Ответ

0 голосов
/ 29 апреля 2020

В этом примере используется jquery, и я думаю, что он хорошо подходит для решения поставленной вами проблемы 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>Test Timer</title>
</head>
<body>
	<span id="spanTimeLeft"></span> seconds left
</body>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
    $(function () {
        $("body").on('click keypress', function () {
            ResetThisSession();
        });
    });

    var timeInSecondsAfterSessionOut = 600; // to change the session time out, change this value. Must be in seconds.
    var secondTick = 0;

    function ResetThisSession() {
        secondTick = 0;
    }

    function StartThisSessionTimer() {
        secondTick++;
        var timeLeft = ((timeInSecondsAfterSessionOut - secondTick) / 60).toFixed(0); // in minutes
        timeLeft = timeInSecondsAfterSessionOut - secondTick;
        $("#spanTimeLeft").html(timeLeft);
        tick = setTimeout("StartThisSessionTimer()", 1000);
    }

    StartThisSessionTimer();
</script>
</html>
...