Question

我想添加一个＆＃39; onmouseover stop＆＃39;设置为这段代码。这是因为我打算写一些长文本，我想给读者一个改变，以阻止文本在他们还没有停止阅读的情况下改变。

我发现了类似的问题，但它们与停止滚动鼠标悬停的选框有关。我尝试添加相同的代码，似乎使一个选项停止，但它只是让我的代码停止一起工作。

<div id="changeText" ></div>
<script type="text/javascript">
    var text = ["1", "2", "3"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 5000);
    function change() {
       elem.innerHTML = text[counter];
       counter++;
       if(counter >= text.length) { counter = 0; }
    }
</script>

Answer 1

您可以使用clearInterval()并在mouseover事件中传递setInterval()调用返回的intervalId，然后在mouseout上重新启动，如下面更新的示例代码所示：

<div onmouseover="stop()" onmouseout="start()" id="changeText" ></div>
<script type="text/javascript">
var text = ["1", "2", "3"];
var counter = 0;
var elem = document.getElementById("changeText");
var intervalId;
start();

function start() {
    intervalId = setInterval(change, 5000);
    function change() {
        elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
}

function stop() {
    clearInterval(intervalId);
}

</script>

将stop onmouse添加到这个简单的代码中

1 个答案: