如何在节拍器计数器中手动设置/更改步骤

Question

计数器停止时如何手动插入新值，然后当我重新启动节拍器时，计数器从该步骤开始？

var inc = 0;//step
    function counter()
    {	
	    if(inc < 9){inc = inc+1;}
	    else {inc = 0;}
	    document.getElementById('btn1').value = inc; //display step
    }
    function metronome()
    {
        //setInterval(function, delay)	
        autoplay = window.setInterval(counter, 
        document.getElementById('btn2').value);
    }

    <div><p>metronome speed</p>
    <input type="number" min="0" max="10000" value="500" id="btn2">ms</input>
    <button onclick="metronome()">start</button>
    <button onclick="window.clearInterval(autoplay)">stop</button>
    </div>
	<div><p>counter</p>
    <input type="number" min="0" max="9" value="0" id="btn1">       
    </div>

Answer 1

将你的javascript代码更改为这个

var inc = 0;
function counter() {
  if (inc < 9) {
    inc = inc + 1;
  } else {
    inc = 0;
  }
  document.getElementById("btn1").value = inc; //display step
}
function metronome() {
  autoplay = window.setInterval(counter, document.getElementById("btn2").value);
}
document.getElementById("btn1").addEventListener("input", e => {
  inc = parseInt(e.target.value);
});

<div><p>metronome speed</p>
  <input type="number" min="0" max="10000" value="500" id="btn2">ms</input>
  <button onclick="metronome()">start</button>
  <button onclick="window.clearInterval(autoplay)">stop</button>
  </div>
<div><p>counter</p>
  <input type="number" min="0" max="9" value="0" id="btn1">       
  </div>
  <script src="main.js"></script>

这将做的是当您更改第二个输入btn1的值(显示 inc 的值(时，它会将其值设置为 inc 。