在MouseOver上多次运行javascript函数_Javascript_Html

在MouseOver上多次运行javascript函数

javascript html

在MouseOver上多次运行javascript函数,javascript,html,Javascript,Html,我有一个函数，在悬停按钮时移动一个框。我希望，只要鼠标悬停在按钮上，该函数每秒都会反复运行。我也尝试过循环，但我无法让它工作。如果你能调查此事，我将不胜感激。这是我的密码： <!DOCTYPE html> <head> <style> #box { position: relative; top: 20px; left: 10px; width: 50px; height: 50px; backgroun

我有一个函数，在悬停按钮时移动一个框。我希望，只要鼠标悬停在按钮上，该函数每秒都会反复运行。我也尝试过循环，但我无法让它工作。如果你能调查此事，我将不胜感激。这是我的密码：

<!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>


#盒子{
位置：相对位置；
顶部：20px；
左：10px；
宽度：50px；
高度：50px；
背景:#333366；
}
函数Start（）{
设置间隔（移动（'box'），1000）；
}
var值=0；
功能移动（元素）{
数值+=50；
变量框=document.getElementById（元素）；
box.style.transition=“左0.2s缓进输出0s”；
box.style.left=值+'px'；
}
悬停移动

使用以下方法：

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

您必须向setInterval传递一个函数。实际上，您正在调用Move并传递其返回值

当这条线

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

执行时，

Move（'box'）

将被计算（并执行一次），因此，

setInterval

的参数是它的返回值，也就是说

null

可能是这样的吗

尝试查看jQuery，它可能会在开始时帮助您。

尝试以下方法：

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);
};

你应该描述期望的结果和你遇到的实际问题，否则人们可能不会给你真正想要的答案。谢谢你的回答。很高兴你向我展示了如何让盒子停止，因为我意识到鼠标离开按钮时盒子一直在移动。谢谢你的回答。我还不太熟悉jQuery。

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);
};