只在点击按钮时启动功能?(javascript）

Only starting a function on button click?(javascript)

本文关键字：功能 javascript 启动 按钮      更新时间：2023-09-26

如何为函数制作启动按钮？我的页面上有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'/>

谢谢！

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

这是假设您有一个具有id='start' 的元素

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

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

<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"，event对象在DOM2标准的第一个参数中传递，但在Microsoft的旧浏览器中它是一个全局变量(我没有使用(。(并不是说微软，在IE5-IE6的时间框架内，他们做了很多来创新web浏览器，包括ajax、innerHTML，事实上，通过attachEvent每个元素的每个事件有多个处理程序，这早于DOM2标准。只是在IE6之后的，他们才让球落下…嗯…十多年了。(

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

相关文章：