我正在制作弹跳球动画。我想要一个表单(num1 和 num 2)，它应该替换变量“int1”或“int2”作为“draw1”或“draw2”的计时器。加载文件并在文本框中输入数字，然后提交它们不会改变间隔。我真的需要这方面的帮助。
<!DOCTYPE HTML>
<head>
<title>Follow the Bouncing Ball</title>
<script>
var context;
var x=50;
var y=240;
var dx=5;
var dy=5;
var int1=form.getElementById('num1').value;
var int2=form.getElementById('num2').value;
function init()
{
context=myCanvas.getContext('2d');
setInterval(draw1,int1)
setInterval(draw2,int2)
}
function draw1()
{
context.clearRect(0,0, 100,500);
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x,y,30,0,Math.PI*2,true);
context.closePath();
context.fill();
//Boundary Logic
if( y<35 || y>470) dy=-dy;
y+=dy
}
function draw2()
{
context.clearRect(100,0, 200,500);
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x+150,y,30,0,Math.PI*2,true);
context.closePath();
context.fill();
//Boundary Logic
if( y<30 || y>450) dy=-dy;
y+=dy
}
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
</script>
<body onLoad="init()">
<canvas id="myCanvas" width="1300" height="500">
</canvas>
<form>
<input type="number" id="num1" min="1" placeholder="Enter Number" autofocus required onkeypress='validate(event)'/>
<input type="number" id="num2" min="1" placeholder="Enter Number" required onkeypress='validate(event)'/>
<input type="submit" value="Animate">
</form>
</body>
</html>
我似乎真的无法用表单中输入的数字替换“int1”或“int2”。
最佳答案
这两行:
var int1=form.getElementById('num1').value;
var int2=form.getElementById('num2').value;
在 DOM 加载之前执行。由于这个原因，您几乎肯定会在浏览器控制台中收到错误。将它们移至“init”函数中。
但是，一旦您这样做，仍然将无法工作，因为您正在启动计时器以响应页面加载完成(“加载”事件)。如果您需要有人输入值，那么这显然行不通。最简单的做法是添加一个“开始”按钮，并将其上的“单击”事件耦合到“init”函数。 编辑哦，好的，您已经有了一个“动画”按钮。这应该是您设置“点击”处理程序的地方。
最后，正如其他人所指出的，您需要将输入字段的值解释为数字。
关于javascript - "setInterval"的定时器是一个变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21077761/