Question

如何为功能创建开始按钮？我在页面上为不同的动画设置了9种不同的功能。我需要弄清楚如何仅在单击按钮时执行动画（开始按钮）我想要这样做的原因是因为我正在制作一个简单的游戏，但我希望最终用户能够在游戏开始之前就与游戏元素进行交互（我已经用jQuery完成了这一点，但目前我只能在游戏运行时移动元素，这不是我想要做的。）一个简单的例子动画功能是

function animate0(pos) {
    pos %= urls.length;
    var animation0 = document.getElementById('animation0');
    var counter = document.getElementById('counter');
    animation0.src = urls[pos];
    if (pos == 1) {
        animation0.onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
    }
    else {
        animation0.onclick = function() {
            //do nothing
        }
    }
    setTimeout(function() {
        animate0(++pos);
    }, (Math.random()*500) + 1000);
}

然后执行动画我用这个

window.onload = function() { //Frames go below, seperated by commas format= , "URL");
    urls = new Array("http://i51.tinypic.com/sxheeo.gif", "http://i56.tinypic.com/2i3tyw.gif");
    animate0(0);

要在页面上显示动画，

<img id='animation0' src ='http://i51.tinypic.com/sxheeo.gif'/>

谢谢！

Answer 1

document.getElementById('start').onclick = function(){
    animate0(0);
}

假设您有一个id='start'

的元素

这是一个小提琴：http://jsfiddle.net/maniator/TQqJ8/13/

Answer 2

我想我可能误解了你的问题，但是如果你有这个按钮（或者确实只是其他任何元素）：

<input type="button" id="theButton" value="Click Me">

然后，您可以通过多种方式为其click事件挂钩处理程序。

最简单但最不强大的是DOM0风格：
```
document.getElementById("theButton").onclick = function() {
    animate0(0);
    return false;
};
```
DOM0处理程序的问题是每个元素上只能有一个处理程序/事件类型。

DOM2风格，基于标准的浏览器如下所示：

document.getElementById("theButton").addEventListener('click', function(event) {
    event.preventDefault();
    animate0(0);
}, false);

...在较旧的IE上看起来像这样：

document.getElementById("theButton").attachEvent('onclick', function() {
    animate0(0);
    return false;
});

注意差异，事件名称是DOM2标准中的“click”，Microsoft的“onclick”，而event对象是在DOM2标准的第一个参数中传递的，但它是一个全局变量（我没有使用）在微软的旧浏览器上。（并没有贬低微软，在IE5 - IE6时间框架内，他们做了很多来创新网页浏览器，包括ajax，innerHTML，实际上每个元素的每个事件多个处理程序通过{{1早于DOM2标准。它只是在 IE6之后，他们让球落下......好......超过十年。）

在所有这些情况下，我直接调用了attachEvent，因为它执行了第一个循环，然后自己调度下一个位。当然，您可以使用animate0来安排第一位是异步的（可能只使用setTimeout的延迟，在大多数浏览器上都是5-10 ms）。这取决于你想做什么。

只在按钮上单击启动功能？（javascript）

2 个答案: