Question

我尝试用画布编写钟摆模拟。我的目标是通过单击Animate按钮更改起始角度，然后单击Stop停止一个。但是 animate（a0deg）和 clearInterval（id）在onClick函数中不起作用。

如果我将这些功能输入到控制台，一切正常，它可以正常工作（例如我可以写 clearInterval（id）; ，动画将停止，然后动画（new_a0deg）和动画将以新的开始角度开始），但如果我把这些函数放在onClick事件中 - 它不起作用。真的很奇怪。任何想法如何解决它？请帮忙。谢谢。

顺便说一下链接到jsbin：http://jsbin.com/pafoteku/2/edit（重要：在jsbin中它以另一种方式工作，而不像在本地html文件中。这是另一个奇怪的事情。点击按钮后永远消失）。

问题在这里：

document.getElementById("animate").onclick = function () {
    //alert('onClick begin');
    clearInterval(id); // < - This doesn't work
    a0deg = document.getElementById("angle").value;
    animate(a0deg); // < - This doesn't work
    //alert('a0deg = '+a0deg);
};

document.getElementById("stop").onclick = function () {
    clearInterval(id); // < - This doesn't work
};

整个代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pendulum</title>

<style >
canvas {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

</style>
</head>
  <body>
    <form >
      <label>
        Angle:
        <input type="text" id="angle" name="angle" value="80" />
      </label>
      <button  id="animate" >Animate</button>
      <button id="stop" >Stop</button>
    </form>
    <canvas id="canvas" width="600" height="400">

  <script>
var a0deg = document.getElementById("angle").value;     //a0deg start angle (deg)
var id = null; //id of setInterval

function animate(a0deg) { 

    var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');

    var fps = 60;           //fps
    var f = 1000/fps;       //time between frames
    var t = 0;              //current time
    var l = 1;              //phisical length of pendulum

    var a0 = Math.PI*a0deg/180; //a0deg start angle (rad)

    var lCanvas = 300;      //pendulum length on canvas (px) 
    var g = 9.8 ;           //g

    function draw() {
        t += f / 1000;
        ctx.clearRect(0, 0, 600, 400);

        ctx.save();
        ctx.translate(300, 0);

        var theta = a0 * Math.cos(t/(Math.sqrt(l/g)))/Math.exp(t/10); 
        ctx.rotate(theta);

        ctx.strokeStyle = '#000'; /* нить */
        ctx.beginPath();
        ctx.moveTo(0, 0); 
        ctx.lineTo(0, lCanvas);
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.closePath(); 

        ctx.beginPath();         /* груз */
        ctx.arc(0, lCanvas, 5, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.restore();
    }  
    id = setInterval(draw , f);
}

animate(a0deg); 

document.getElementById("animate").onclick = function () {
    //alert('onClick begin');
    clearInterval(id);
    a0deg = document.getElementById("angle").value;
    animate(a0deg); 
    //alert('a0deg = '+a0deg);
};

document.getElementById("stop").onclick = function () {
    clearInterval(id);
};

</script>
</body>
</html>

Answer 1

尝试添加

return false;

在你的onclick代码的末尾。

Answer 2

Demo

使用

<button type="button" id="animate">Animate</button>
<button type="button" id="stop">Stop</button>

或

<input type="button" id="animate" value="Animate" />
<input type="button" id="stop" value="Stop" />

请注意，除非您使用type="button"，否则<button>个元素在某些浏览器中可能会出现错误。

在这种情况下，它们的行为类似于提交按钮，因此他们发送表单，重新加载页面。

然后，另一种避免这个问题的方法是使用

button.onclick = function (e) {
    /* Click event handler */
    e && e.preventDefault && e.preventDefault();
    return false;
};

e.preventDefault阻止发送表单的位置。请注意，不支持它的旧浏览器可能需要非标准（DOM0）return false。

Answer 3

另一种解决方案是不使用表单按钮并跳过所有浏览器/表单的怪癖。制作自己的按钮，一切正常。这是我对您的代码所做的所有更改：

<div id="animate" style="background-color: gray; cursor: pointer;">Animate</div>
<div id="stop"    style="background-color: gray; cursor: pointer;">Stop</div>

我确信你可以添加CSS样式并让它们更漂亮。

我的功能在onclick功能中不起作用

3 个答案: