Question

我正在尝试做到这一点，以便可以使用滑块实时更改间隔计时器的值。我设法做到了，所以我可以显示滑块的当前值。我可以使用与文本框中使用的变量相同的变量，还是必须创建一个新变量？可以肯定的是，解决方案非常简单。感谢任何帮助。谢谢！

jsfiddle

https://jsfiddle.net/8bdycskp/32/

var quotes = [
  "X",
  "Y",
  "Z"
];

// initialise current quote index
var quoteIndex = 0;
// get interval time
var interval = document.getElementById("interval").value;

// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  let intervalval = setInterval(quoteTimer, interval);
  $("#button").on("click", function() {
     let v = parseInt($("#interval").val());
     clearTimeout(intervalval);
     intervalval = setInterval(quoteTimer, v);
  })
});


    
var p = document.getElementById("interval2"),
    res = document.getElementById("result");

p.addEventListener("input", function() {
    res.innerHTML = p.value + "ms";
}, false);

<body>
  <center></br>
  <input type="text" name="interval" id="interval" value="" style="height:50px; width:500px; font-size: 25px" placeholder="Czas w ms" /></br></br>
  1ms<input name="interval2" id="interval2" type="range" min="1" max="1000" value="" /> 1000ms</br>
  <p id="result"></p>
  <input type="submit" name="button" id="button" value="Rozpocznij" style="padding: 10px 50px; font-size: 25px"/>  </center>
  <div class="container">
  <h1></h1>
</div>

</body>

Answer 1

这很简单。您只需要删除输入文本和按钮并添加范围输入即可。然后将“ onchange”事件绑定到侦听器，并执行与“ click”事件相同的功能

这是一个带有代码https://jsfiddle.net/8bdycskp/56/的jsfiddle

// define quotes array
var quotes = [
  "AAAA",
  "BBBB",
  "CCCC"
];

// initialise current quote index
var quoteIndex = 0;
// get interval time
var interval = document.getElementById("range").value;

// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  let intervalval = setInterval(quoteTimer, interval);
  $("#range").on("change", function() {
    let v = parseInt($("#range").val());
    clearTimeout(intervalval);
    intervalval = setInterval(quoteTimer, v);
  })
});

<body>
    <input type="range" name="range" id="range" value="1000" min="100" max="5000" step="10"/>
    <div class="container">
        <h1></h1>
    </div>
</body>

Answer 2

只需添加事件侦听器以检测更改，然后更新您的时间间隔

var intervalval = '';

function slider() {
    clearTimeout(intervalval);
    var v = parseInt($("#interval").val());
    intervalval = setInterval(quoteTimer, v);
}
//Listen for changes
$(document).on('input', '#interval', function() {
    slider();
})

See working fiddle with range slider

使用滑块实时更新间隔计时器

2 个答案: