输入值后Javascript单击按钮停止。在 value=inputed value 之后也停止增加 value答案

【问题标题】：Javascript click button stop after inputting the value. Also stop incrementing value after value=inputed value输入值后Javascript单击按钮停止。在 value=inputed value 之后也停止增加 value
【发布时间】：2017-11-03 02:22:04
【问题描述】：

如果计数器值等于数字，即输入值，我想停止 mytimer()。单击按钮不应在空输入和任务完成后起作用。现在，当您单击提交按钮时，它会将计数器增加 1。重置按钮应重置计数器并清除输入。重新启动按钮应重新启动计数器。在此，我每 3 秒和 5 秒突出显示一次框。

Javascript：

$(document).ready(function () {
   $("#num").click(function(){
  var number = parseInt($('#display').text(), 10) || 0;
  var counter = setInterval(function () { mytimer()}, 1000);
  function mytimer() {
    number++;

    var max = $('#int').val() || number;
    $('.box1').css('background-color', number % 3 === 0 ? 'red' : '');
    $('.box2').css('background-color', number % 5 === 0 ? 'red' : '');
    $('#display').text(number);

    if (number >= max) {
        clearInterval(counter);
    }
  }

  // $('#display').text(number);
});

});
var MAX = 'number';

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="sangeet.js"></script>
<link rel="stylesheet" href="sangeet.css">
</head>
<body>

<form>
  Enter the Number <br>
  <input type="number" placeholder="Number" value="input" id="int">
  <button type="button" value="Submit" id="num">Click Me</button>
  <p id="display"></p>
</form>

<div>
<div class="box1">
  <p>YES</p>
</div>
<div class="box2">
  <p>NO</p>
</div>
</div>
<button type="button" id="reset"> Reset </button>
<button type="button" id="restart"> Restart </button>

</body>
</html>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

K 所以我试着记录它并连接你的其他按钮。

$(document).ready(function(){
	var interval;
  var $maximumValue = $('#int');
  var $currentValue = $('#display');
  var finished = false;
  
  function mytimer () {
  	//parse a string "0" if the current value is blank
  	var currentValue = parseInt($currentValue.text().trim() || "0", 10);
    var maximumValue = parseInt($maximumValue.val(), 10);
    
    //perform the logic if the maximum hasn't been reached
    if (currentValue < maximumValue) {
    	currentValue++;
      
      $('.box1').css('background-color', currentValue % 3 === 0 ? 'red' : '');
      $('.box2').css('background-color', currentValue % 5 === 0 ? 'red' : '');
      $currentValue.text(currentValue);
    } else {
        //stop the timer, marking it as having reached the maximum
        stoptimer(true);
    }
  }
  
  function starttimer () {
  	//don't start another interval if one already is started, or if the maximum is not given
  	if (!interval && $maximumValue.val().trim().length) {
    	//clear previous fields
    	$currentValue.text('');
    	$('.box1, .box2').css('background-color', '');
      //start the new timer
      interval = setInterval(mytimer, 1000);
    }
  }
  
  function stoptimer (timerFinished) {
  	//set if the timer stopped because it reached the end
    finished = (timerFinished === true);
		if (interval) clearInterval(interval);
    //remove the interval so we can start a new one later
    interval = null;
    
    //clear previous fields if terminated prematurely
    if (!finished) {
    	$currentValue.text('');
    	$('.box1, .box2').css('background-color', '');
    }
  }
  
	$('#num').on('click', function(){
  	//only start the timer if the last timer didn't finish
  	if (!finished) starttimer();
  });
  
  $('#reset').on('click', function(){
  	//stop any on going timer
  	stoptimer();
    //clear the maximum value for new value
    $maximumValue.val('');
  });
  
  $('#restart').on('click', function(){
  	//stop any on going timer
  	stoptimer();
    //start the timer again
    starttimer();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Enter the Number <br>
  <input type="number" placeholder="Number" value="input" id="int">
  <button type="button" value="Submit" id="num">Click Me</button>
  <p id="display"></p>
</form>

<div>
<div class="box1">
  <p>YES</p>
</div>
<div class="box2">
  <p>NO</p>
</div>
</div>
<button type="button" id="reset"> Reset </button>
<button type="button" id="restart"> Restart </button>

【讨论】：

【解决方案2】：

试试这个

 var number = 0;
    var max = 0;
    var counter;
    $(document).ready(function () {
        $("#num").click(function () {
            number = parseInt($('#display').text(), 10) || 0;
            max = parseInt($('#int').val(), 10) || number;
            if (number != max) {
                counter = setInterval(function () { mytimer() }, 1000);
            }
        });
        $("#reset").click(function () {
            clearInterval(counter);
            $('#display').text('');
            $('#int').val('');
        });
        $("#restart").click(function () {
            number = 0;
            max = parseInt($('#int').val(), 10) || number;
            if (number != max) {
                counter = setInterval(function () { mytimer() }, 1000);
            }
        });
    });

    function mytimer() {
        number++;
        $('.box1').css('background-color', number % 3 === 0 ? 'red' : '');
        $('.box2').css('background-color', number % 5 === 0 ? 'red' : '');
        $('#display').text(number);

        if (number >= max) {
            clearInterval(counter);
        }
    }

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="sangeet.js"></script>
    <link rel="stylesheet" href="sangeet.css">
</head>
<body>

    <form>
        Enter the Number <br>
        <input type="number" placeholder="Number" value="input" id="int">
        <button type="button" value="Submit" id="num">Click Me</button>
        <p id="display"></p>
    </form>

    <div>
        <div class="box1">
            <p>YES</p>
        </div>
        <div class="box2">
            <p>NO</p>
        </div>
    </div>
    <button type="button" id="reset"> Reset </button>
    <button type="button" id="restart"> Restart </button>

</body>
</html>

【讨论】：

谢谢苏迪尔！这样可行。你能告诉我如何通过单击重新启动按钮来重新启动该过程。
希望对您有所帮助。