Таймер обратного отсчета, где пользователь вводит, как долго он должен работать

Question

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

Answer 1

гораздо проще

var timer;

function setTimer(event){

      if(timer) 
      {
         clearInterval(timer)
      }

      var timerValue = document.getElementById("timerstart").value ;
   
      timer = setInterval(function(){
      
        if(timerValue > 0){
        
          document.getElementById("timer").innerHTML=timerValue;
          
          timerValue --;
        } else {
          clearInterval(timer)
        }


      },1000);


 }

<div>
    <label>Start Timer After(seconds)</label>
    <input type="text" name="timerstart" id="timerstart" />
</div>

<button onclick="setTimer(event)" >Start Timer</button>

<div ><span>Timer : </span><span id="timer"></span></div>

Answer 2

Вот простой пример:

    var sec = 10;
    $('#btn').on('click', function(){
      
      var timer = setInterval(function(){
        var sec = parseInt($('#timer').val());
        if(sec>0) {
          sec--;
          $('#timer').val(sec);
        } else {
          foo();
          clearInterval(timer);
        }
      }, 1000)
    });

    function foo(){
      alert('Timer ended!');
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="timer" value="10" /><button id="btn">Start timer</button>