个人中心
gpt4 book ai didi

javascript - 我的函数在 onclick 函数内不起作用

转载 作者：行者123 更新时间：2023-11-28 11:35:38 26 4
gpt4 key购买 nike

我尝试用 Canvas 编写摆模拟。我的目标是通过单击“动画”按钮来更改起始 Angular ，并通过单击“停止”来停止 Angular 。但是 animate(a0deg) 和 clearInterval(id) 在 onClick 函数中不起作用。

如果我输入这些函数来控制台一切正常，它就可以正常工作(例如我可以编写 clearInterval(id); ，动画将停止，然后 animate(new_a0deg)强>并且动画将以新的起始 Angular 开始)，但如果我将此函数放入 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>

最佳答案

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 .

关于javascript - 我的函数在 onclick 函数内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22306128/

26 4 0
文章推荐： css - 无法将 Bower 组件 css 添加到 Rails 4.2 中的 Assets 管道中
文章推荐： json - 解码 Json 不工作，也不报错
文章推荐： css - @font-face 不适用于 OS X Yosemite Chrome 26 - 版本
文章推荐： swift - 如何在 TableView 中为另一个 TableView 行的 TableView 行生成相同的随机颜色？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com