仅在单击按钮时启动功能？（javascript）

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 事件连接处理程序。

1. 最简单但最不强大的是 DOM0 样式：

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

   DOM0 处理程序的问题在于每个元素上只能有 一个 处理程序/事件类型。

2. 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”，而在 DOM2 标准中，event 对象在第一个参数中传递，但它是一个全局变量（我没有'不使用）在微软的旧浏览器上。 （不是贬低微软，在 IE5 - IE6 时间范围内，他们做了很多很多来创新网络浏览器，包括 ajax、innerHTML，实际上每个元素每个事件都有多个处理程序，通过 attachEvent，早于 DOM2 标准。只是 在 IE6 之后，他们让球丢了……嗯……十多年。）

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