首页 > 解决方案 > 如何使用范围滑块设置“setInterval”的速度?

问题描述

我尝试放置一个在滑块更改时更改的变量,但它不起作用。有人有想法吗?下面的代码是我正在尝试做的一些示例: 那是:通过创建一个改变秒值的滑块,每秒钟创建一个 BPM 和弦变化,但它不起作用,我不知道我该怎么做。

//Example of what i wanna do.
var i = 0;
var inter;
var index = 4;

function change() {
      var doc = document.getElementById("First");
      var doc2 = document.getElementById("Next1");
      const ar = ["A","Am","B","Bm","C","Cm","D","Dm","Em","F","Fm","G","Gm"];//Chords
      doc.innerHTML = ar[i];//Showing the first chord
      doc2.innerHTML = ar[i+1];//Showing the next chord
      i = (i + 1) % ar.length;
}
inter = setInterval(change, 4000);// this is what im having problems with.



//Example of what i tried before this poster:
//Did not worked
function changeVelocity(){
velocity = document.getElementById("VelocitySlider").value;
if(velocity = 40){
  inter = setInterval(change, 1.5*1000);
}
}



//What i did in HTML was this. 
//The input code im talking about: 
<input oninput="changeVelocity();"onchange="changeVelocity();"type="range" min="40" step="5"max="180" value="40" class="slider" id="Vel">

标签: javascripthtmlsetintervalrangeslider

解决方案


在每次范围更改时,您需要清除以前的 setInterval 并设置新的间隔


推荐阅读