Таймер запуска по нажатию кнопки не работает Javascript - PullRequest
Новая
       22

Таймер запуска по нажатию кнопки не работает Javascript

0 голосов
/ 21 октября 2018

Я попытался реализовать кнопку для запуска таймера при нажатии, но, похоже, он не работает.Это код, который я использовал.Он запускается только при загрузке страницы, но я хочу установить нажатие кнопки, чтобы активировать таймер.Что я делаю не так? 

$("#startClock").click(function() {
  startTimer();
});

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.textContent = minutes + ":" + seconds;

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

window.onload = function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="time1">05:00</span></div>
  <div class="mdl-grid">

    <div class="mdl-layout-spacer"></div>

    <button id="startClock" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
      50 coins 
    </button>

    <div class="mdl-layout-spacer"></div>
  </div>

</div>

1 Ответ

0 голосов
/ 21 октября 2018

Вам просто нужно убедиться, что вы передаете параметры startTimer(), в этом случае fiveMinutes и display: 

$("#startClock").click(function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
});

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.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="time1">05:00</span></div>
  <div class="mdl-grid">

    <div class="mdl-layout-spacer"></div>

    <button id="startClock" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
      50 coins 
    </button>

    <div class="mdl-layout-spacer"></div>
  </div>

</div>

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

$("#startClock").click(function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
});

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

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

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  };
  
  
  setInterval(intervalFn, 1000);
  
  intervalFn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span id="time1">05:00</span></div>
  <div class="mdl-grid">

    <div class="mdl-layout-spacer"></div>

    <button id="startClock" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
      50 coins 
    </button>

    <div class="mdl-layout-spacer"></div>
  </div>

</div>
...