Question

我有一个在悬停按钮时移动框的功能。只要鼠标悬停在按钮上，我希望该功能每秒都会反复运行。我也试过循环，但我不能让它工作。如果你研究一下，我会非常感激。这是我的代码：

<!DOCTYPE html>
<head>
<style>
#box {
    position: relative;
    top: 20px;
    left: 10px;
    width: 50px;
    height: 50px;   
    background:#333366;
}
</style>

<script>
function Start() {  

setInterval(Move('box'),1000);

}

var value = 0;
function Move(element) {

    value += 50;    
    var box = document.getElementById(element);
    box.style.transition = "left 0.2s ease-in-out 0s";
    box.style.left = value+'px';    

}
</script>
</head>
<body>
<button onmouseover="Start();">Hover to move</button>
<div id="box"></div>
</body>
</html>

Answer 1

使用此：

setInterval(function(){
    Move('box')
},1000);

您必须将函数传递给setInterval。您实际上正在调用Move并传递其返回值。

Answer 2

这样的事可能吗？

http://jsfiddle.net/blackjim/HwKb3/1/

var value = 0,
    timer,
    btn = document.getElementById('btn');

btn.onmouseover = function(){
    timer = setInterval(function(){
        //    your loop code here
        Move('box');
    }, 1000);
};

btn.onmouseout = function(){
    clearInterval(timer);
}

function Move(element) {

    value += 50;
    var box = document.getElementById(element);
    box.style.transition = "left 0.2s ease-in-out 0s";
    box.style.left = value + 'px';

}

尝试查看jQuery，它可能在一开始就帮助你。

Answer 3

当这一行

setInterval(Move('box'),1000);

被执行，Move('box')被评估（并执行一个），因此，你setInterval的参数是它的返回值，即null

Answer 4

试试这个：

var value = 0;
function move(element) {
    value += 50;
    var box = document.getElementById(element);
    box.style.transition = "left 0.2s ease-in-out 0s";
    box.style.left = value+'px';
    // console.log(box);
}

var button = document.getElementById("buttonID");
button.onmouseover = function() {
    this.iid = setInterval(function() {
        move("boxID");
    }, 1000);
};

button.onmouseout = function() {
    this.iid && clearInterval(this.iid);
};

在onmouseover上多次运行javascript函数

4 个答案: