Как активировать мой таймер обратного отсчета с помощью кнопки?

Question

У меня есть функция таймера обратного отсчета, выписанная в javascript.Its работает, но она начинается, когда я запускаю страницу. Я хочу, чтобы она начиналась при нажатии кнопки.

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 = 0; 

       time.style.display = "none"; 
       time2.style.display2 = "none"; 
       redxsms.style.display = "none"; 
       onaysms.style.display = "none"; 
       tekraruyarionay.style.display = "block"; 
       tekraruyarired.style.display = "block"; 

       // time.style.display="block"; 
       setTimeout(function() { location.reload() }, 5000); 
      } 
     }, 1000); 
    } 



    jQuery(function ($) { 
     var fiveMinutes = 60 * 3, 
      display = $('#time'); 
     display2 = $('#time2'); 
     startTimer(fiveMinutes, display); 
     startTimer(fiveMinutes, display2); 

    }); 

это функция обратного отсчета.

<button class="ui toggle button" onclick="  hideshow(document.getElementById('onaysms')); show(this);" id="onaytoggle"> 

Это кнопка, когда я нажимаю ее, должна активироваться.

<span id="time"></span> 

Он начинается с начала страницы, как я могу начать, когда кнопка нажата?

Answer 1

Вставьте свой таймер в событие «onclick», подобное этому, оно будет запущено, когда вы нажмете на кнопку.

Если у вас есть несколько кнопок на странице, я бы посоветовал вам дать один идентификатор, добавив это в HTML: id='timerToggle', а затем заменить $("button.toggle") в коде ниже по $("#timerToggle")

jQuery(function ($) { 
      $("button.toggle").click(function(){ 
       var fiveMinutes = 60 * 3, 
        display = $('#time'); 
       display2 = $('#time2'); 
       startTimer(fiveMinutes, display); 
       startTimer(fiveMinutes, display2); 
      }); 
     });