Fatal编程技术网
  • javascript/
  • Javascript 我的函数没有'；不能在onclick函数中工作

Javascript 我的函数没有'；不能在onclick函数中工作

javascript function animation canvas

Javascript 我的函数没有'；不能在onclick函数中工作,javascript,function,animation,canvas,onclick,Javascript,Function,Animation,Canvas,Onclick,我尝试用canvas编写钟摆模拟。我的目标是通过单击“动画”按钮更改开始角度，并通过单击“停止”停止一个。但是动画（a0deg）和clearInterval（id）在onClick函数中不起作用 如果我输入这些函数来控制一切正常，它工作正常（例如我可以编写clearInterval（id）；动画将停止，然后动画（新角度）动画将以新的开始角度开始）， 但是 如果我把这个函数放在onClick事件中，它就不起作用了。真奇怪。有没有办法解决这个问题？请帮忙。多谢各位 顺便说一句，链接到jsbin:（重

我尝试用canvas编写钟摆模拟。我的目标是通过单击“动画”按钮更改开始角度，并通过单击“停止”停止一个。但是动画（a0deg）和clearInterval（id）在onClick函数中不起作用

如果我输入这些函数来控制一切正常，它工作正常（例如我可以编写clearInterval（id）；动画将停止，然后动画（新角度）动画将以新的开始角度开始）， 但是 如果我把这个函数放在onClick事件中，它就不起作用了。真奇怪。有没有办法解决这个问题？请帮忙。多谢各位

顺便说一句，链接到jsbin:（重要：在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
};

document.getElementById（“动画”）.onclick=function（）{
//警报（“onClick begin”）；
clearInterval（id）；//<-这不起作用
a0deg=document.getElementById（“角度”）.值；
设置动画（a0deg）；//<-这不起作用
//警报（'a0度='+a0度）；
};
document.getElementById（“停止”）.onclick=function（）{
clearInterval（id）；//<-这不起作用
};
全部代码：

<!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>


钟摆
帆布{
背景：#f0；
边框：1px实心#ccc；
}
角度：
使有生气
停止
var a0deg=document.getElementById（“角度”）.值//A0度起始角（度）
var id=null//设置间隔的id
函数设置动画（a0deg）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var fps=60；//fps
var f=1000/fps；//帧间时间
var t=0；//当前时间
var l=1；//摆锤的物理长度
var a0=数学PI*a0deg/180；//a0deg起始角（rad）
var lCanvas=300；//画布上的摆锤长度（px）
var g=9.8；//g
函数绘图（）{
t+=f/1000；
ctx.clearRect（0,060400）；
ctx.save（）；
ctx.translate（300,0）；
var theta=a0*Math.cos（t/（Math.sqrt（l/g）））/Math.exp（t/10）；
旋转（θ）；
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=设定间隔（绘图，f）；
}
设置动画（0度）；
document.getElementById（“animate”）.onclick=function（）{
//警报（“onClick begin”）；
清除间隔（id）；
a0deg=document.getElementById（“角度”）.值；
设置动画（0度）；
//警报（'a0度='+a0度）；
};
document.getElementById（“停止”）.onclick=function（）{
清除间隔（id）；
};
尝试添加

return false;
在onclick代码的末尾。

使用

其中
e.preventDefault
阻止发送表单。请注意，不支持它的旧浏览器可能需要非标准（DOM0）
返回false
另一种解决方案是不使用表单按钮并跳过所有浏览器/表单的怪癖。做你自己的按钮，一切都很好。以下是我对您的代码所做的所有更改：

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

制作动画
停止
我相信你可以添加CSS样式，使它们更漂亮。

尽量减少代码，去掉所有不属于问题的部分。让想要帮助您的用户更容易。另外，您是否打开了调试器（firebug等）？你看到错误了吗？您使用的是什么web浏览器？什么版本？我在Chrome和FF的最新版本中试用过。在调试器中没有任何错误。它工作正常！非常感谢。但是为什么？？？我花了两天时间来理解原因，但仍然不明白。你可以看到奥利奥的答案。他的回答很清楚，谢谢！但仍然不确定是否理解e&&e.preventDefault&&e.preventDefault（）@Vega这是if（e&&e.preventDefault）{e.preventDefault（）；}的一条捷径。如果您不关心旧浏览器抛出错误，因为它们没有实现错误，那么您可以使用
e.preventDefault（）
。 
<input type="button" id="animate" value="Animate" />
<input type="button" id="stop" value="Stop" />

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

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