[英]Get value of slider while it's being moved?
I'm messing around learning some basic front-end web technologies - Bootstrap, jQuery, HTML5 canvas - and I wanted to be able to update the dimensions of a sinusoid I'm drawing as the slider moves, not when it's released (how it currently works).我正在学习一些基本的前端 Web 技术——Bootstrap、jQuery、HTML5 画布——并且我希望能够在滑块移动时更新我正在绘制的正弦曲线的尺寸,而不是在它发布时(它是如何目前有效)。
<input type="range" id="ampSlider" min="-200" max="200" step="5" onchange="refreshGraph()">
<input type="range" id="freqSlider" min="1" max="400" step="5" onchange="refreshGraph()">
<canvas id="graphCanvas" width="1000" height="600"></canvas>
<script>
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();
}
</script>
Use oninput
instead of onchange
使用oninput
而不是onchange
For example, a quick one liner utilizing this is as follows:例如,使用它的快速单衬如下:
document.getElementById("myid").oninput = function() { console.log(this.value) };
除了 onchange 之外,尝试使用 onmousemove。
Easy way do it with jQuery:使用 jQuery 的简单方法:
$("#ampSlider").bind("change", function() {
drawGraph($("#ampSlider").val(), $("#freqSlider").val());
});
$("#freqSlider").bind("change", function() {
drawGraph($("#ampSlider").val(), $("#freqSlider").val());
});
and of course you'd then remove your onChange
attributes:当然,然后您会删除您的onChange
属性:
<input type="range" id="ampSlider" min="-200" max="200" step="5">
<input type="range" id="freqSlider" min="1" max="400" step="5">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.