Question

我正在使用JavaScript构建一个倒数计时器，并且似乎找不到用户输入希望计时器运行多长时间的计时器。我已经有了计时器并将其链接到我的html文件，但是我需要知道如何将其设置为用户可以输入希望其运行的时间的地方。

Answer 1

这是一个简单的例子：

    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>

Answer 2

简单得多

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>

用户输入应该运行多长时间的倒数计时器

2 个答案: