当我点击 div 框时,我似乎无法触发代码,它只是在加载时继续运行。
<div id='tank' onclick="timer" style="position:relative; left:100px; top:240px;border- radius:360px;
background-color:green; height:100px; width:100px;"></div>
<script type="text/javascript">
(function () {
// don't leak variables into the global scope - think "variable = carbon dioxide"
var elem = document.getElementById('tank'), pos = 100,
timer = setInterval(function() {
pos++;
elem.style.left = pos+"px";
if( pos == 290) clearInterval(timer);
},12);
})();
最佳答案
(function () {
//...
}());
立即运行函数内的代码,因此您的代码在页面加载时运行也就不足为奇了。
onclick="timer"
什么也不做。这与编写类似的内容相同:
var foo = 42;
foo; // <- this does not do anything
更糟糕的是,如果未定义timer
,则会抛出错误(您的示例中就是这种情况)。
您要做的就是为元素分配一个函数作为单击事件处理程序。例如:
document.getElementById('tank').onclick = function() {
var elem = this,
pos = 100,
timer = setInterval(function() {
pos++;
elem.style.left = pos+"px";
if( pos == 290) clearInterval(timer);
},12);
};
(并从 HTML 中删除 onclick="timer"
)
我建议阅读the excellent articles at quirksmode.org了解有关事件处理的更多信息。
关于javascript - 如何使用 onclick 事件触发此代码。我尝试过但失败了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12250870/