滑块移动时获取滑块的价值？

我正在学习一些基本的前端Web技术 – Bootstrap，jQuery，HTML5 canvas – 我希望能够在滑块移动时更新我正在绘制的正弦曲线的尺寸，而不是在它发布时（如何发布）目前有效）。

    drawShape(); drawGraph(200, 150); $("#ampSlider").val(200); $("#freqSlider").val(150); function refreshGraph() { console.log($("#ampSlider").val()); drawGraph($("#ampSlider").val(), $("#freqSlider").val()); } function drawGraph(amp, freq) { console.log("Drawing: " + amp + " | " + freq); var canvas = document.getElementById('graphCanvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); var y = canvas.height/2; context.lineWidth = 10; context.beginPath(); context.moveTo(0, y); for(n = 0; n < canvas.width; n += 5) { context.lineTo(n, amp * Math.sin(Math.PI * n / freq) + y); } context.stroke(); }  

Answer 1

使用oninput而不是onchange

Answer 2

除了onchange之外，尝试使用onmousemove。

Answer 3

使用jQuery轻松实现：

 $("#ampSlider").bind("change", function() { drawGraph($("#ampSlider").val(), $("#freqSlider").val()); }); $("#freqSlider").bind("change", function() { drawGraph($("#ampSlider").val(), $("#freqSlider").val()); }); 

当然，然后你将删除你的onChange属性：