提交定时器的值，然后用于 JS 函数

Question

我正在尝试让用户设置计时器的值，然后在网页上看到倒数计时器。

这是我的 HTML 代码：

<p>Timer:</p> 
<input type="text" name="timing" id="demoC" style="height:50px;" value="3">
<div id="answer">Your dish will be ready in <span id="time"></span> minutes!</div>
<input type="submit" name="submit" class="submit" value="Submit">

这是我的 JS 代码：

  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;
            var html = "Your dish is ready!!";
            document.getElementById('answer').innerHTML = html;
        }
    }, 1000);
  }
  
  jQuery(function ($) {
    var  myVar = 60 * document.getElementById('demoC').value,
        display = $('#time');
    startTimer(myVar, display);
  });

此代码有效，因为在 HTML 文件中，我直接将该值硬编码为 3 分钟。

但我想删除这个 value="3" 并且能够在输入字段中手动设置它。但是当我这样做时，没有显示计时器。

Answer 1

你需要的是事件后 startTimer 函数的触发器在您的代码中，事件是单击按钮

为您的按钮添加 id 属性

 <input type="submit" id="submit" name="submit" class="submit" value="Submit">

并为您的按钮添加点击事件侦听器

 $("#submit").on("click",function(){
        var  myVar = 60 * document.getElementById('demoC').value,
            display = $('#time');
        startTimer(myVar, display);
    })

Answer 2

    jQuery(function ($) {
        $("#submit").on("click",function(){
            var  myVar = 60 * document.getElementById('demoC').value,
                display = $('#time');
            startTimer(myVar, 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.text(minutes + ":" + seconds);

            if (--timer < 0) {
                timer = 0;
                var html = "Your dish is ready!!";
                document.getElementById('answer').innerHTML = html;
            }
        }, 1000);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <p>Timer:</p>
    <input type="text" name="timing" id="demoC" style="height:50px;" value="3">
    <div id="answer">Your dish will be ready in <span id="time"></span> minutes!</div>
    <input type="submit" id="submit" name="submit" class="submit" value="Submit">

Answer 3

首先，您应该将 'id' 属性添加到输入元素：

 <input type="submit" name="submit" class="submit" value="Submit" id="submit">

但是如果用户输入多个值，仅仅设置函数会使计时器出现故障，所以你应该像这样更改你的代码：

    var clearIntervalId;
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        clearIntervalId = 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;
                var html = "Your dish is ready!!";
                document.getElementById('answer').innerHTML = html;
            }
        }, 1000);
  }
  
    $("#submit").click(function(){
            var  myVar = 60 * document.getElementById('demoC').value,
                display = $('#time');
            if (typeof clearIntervalId !== 'undefined') {
                clearInterval(clearIntervalId)
            }
            startTimer(myVar, display);
    });

clearIntervalId 被使用，所以之前的运行 setInterval()-函数在每次用户点击按钮时都会被清除，这样就不会干扰当前分钟+秒的变化。

提交定时器的值，然后用于 JS 函数

Submit the value of a timer which is then use for JS function

html

javascript

timer