Question

我正在制作一个弹跳球动画。我想要一个表格（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”。

Answer 1

这两行：

 var int1=form.getElementById('num1').value;
 var int2=form.getElementById('num2').value;

在加载DOM之前正在执行

。出于这个原因，您几乎肯定会在浏览器控制台中收到错误。将它们移到“init”函数中。

然而，一旦你这样做，仍然的东西将无法工作，因为你正在启动计时器以响应页面加载完成（“加载”事件）。如果你需要某人输入值，那么这显然不会起作用。最简单的方法是添加一个“开始”按钮，并将“click”事件连接到“init”函数。编辑哦，好吧，你已经有了一个“Animate”按钮。那应该是你设置“点击”处理程序的地方。

最后，正如其他人所说，您需要将输入字段的值解释为数字。

Answer 2

您可以使用setTimeout代替setInterval，这样您就可以制作'等待'时间变量。所以，而不是这样做：

var waitTime = 1000;
setInterval(function(){
   //your logic here
}, waitTime);    //Here waitTime sticks with the initial value

你这样做：

var waitTime = 1000;    //This can change anytime
(function tick(){
    //your logic here
    setTimeout(tick, waitTime);   //Here waitTime can vary in any cycle
})();

区别在于setTimeout，您可以随时修改waitTime，它会影响下一个周期。但是对于setInterval，初始值将保持“永远”

此外，您的计时器应该在您单击按钮时更新，因此您应该：

var int1 = 1000, int2 = 1000;  //Just default values
var document.querySelector("form input[type=submit]").addEventListener("click", function(){
    int1 = parseInt(document.getElementById('num1').value);
    int2 = parseInt(document.getElementById('num2').value); 
    return false; //Prefents form from being submited (I think you need this)
});

希望这会有所帮助。干杯

Answer 3

其他人告诉你应该将字符串更改为数字是真的，但它不能解决你的问题。你想通过在脚本开头var int1=form.getElementById('num1').value一次int1与num1字段的值绑定来神奇地思考。当然情况并非如此。 var foo=bar仅作为任务，仅此而已; <{1}}在分配时被赋予实际值，表达式被遗忘。

另一个神奇的想法是，当num1改变价值时，setInterval(draw1,int1)会立即改变间隔。不，int1在调用时使用setInterval的实际值进行调用，并且它不关心值的来源（谷歌“按值传递参数”以了解一般原则）。

你需要做的是

在表单中安装提交处理程序（如果您不想使用jQuery，请使用google'onsubmit'，或使用jQuery的int1）。在处理程序内部，
- 停止计时器（.on('submit', function () {...})），但这意味着您必须将clearInterval(timer1); clearInterval(timer2);次调用中的结果保存到变量setInterval和timer1;
- 然后重新安装新的计时器（同时将它们记住到timer2和timer1，以便在后续表单提交时停止它们。

Answer 4

尝试使用parseInt，如下所示：

int2=parseInt(form.getElementById('num2').value);

没有parseInt，它认为int1和int2是字符串。

Answer 5

你在这里得到String：

form.getElementById('num1').value;

您应该将string解析为int。

Answer 6

我知道在创建后无法更改超时的间隔。

我会在价值变化时取消并重新创建超时。

“setInterval”的计时器是一个变量

6 个答案: