JavaScript函数：计数器应每秒递增计数，一旦达到给定数字，计数器应停止

我正在尝试编写JavaScript函数，其中计数器应该每秒递增计数，并且一旦达到onClick（）之后输入字段中的给定数字，计数器就会停止。当计数器可以被3整除时，我想突出显示box1。当计数器可被5整除时，突出显示方框2

JavaScript:

$(document).ready(function () {
  var number = parseInt($('#test').text(), 10) || 0; // Get the number from paragraph
  // Called the function in each second
  var interval = setInterval(function () {
      $('#test').text(number++); // Update the value in paragraph

      if (number > 5) {
          clearInterval(interval); // If exceeded 100, clear interval
      }
  }, 1000); // Run for each second
});

HTML:

输入号码


手指

脚趾

重置
重新启动

我会做以下几点：

var MAX = 999;

$(document).ready(function () {
  var number = parseInt($('#test').text(), 10) || 0;
  var interval = setInterval(function () {
      number++;

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

      if (number >= max) {
          clearInterval(interval);
      }
  }, 1000);

  $('#test').text(number);
});

我还向框中添加了ID：

<div class="box" id="box1">
  <p>Finger</p>
</div>
<div class="box" id="box2">
  <p>Toes</p>
</div>

手指

脚趾

document ready（文档准备就绪）功能成功计数5次，但您尝试过哪些响应鼠标单击的功能？

<div class="box" id="box1">
  <p>Finger</p>
</div>
<div class="box" id="box2">
  <p>Toes</p>
</div>