在mouseenter上使用javascript在div上连续循环颜色

Question

我在页面上有一个div，我想使用javascript连续循环一组颜色。

我在Stack Overflow上看到了很多关于使用数组和javascript显示信息的连续循环的文章，但我在尝试将其实现到自己的项目中时遇到了困难。

我的HTML:

<div id="box" style="background:grey;" onmouseenter="change()"></div>

以及我能找到的最接近JS的解决方案：

var change = function() {
    colors = ['#00b0e2', '#e3144e', '#15e39b'];
    count = -1;
    return function() {
        return colors[++count % colors.length];
    }
    document.getElementById('box').style.background = colors; // or should this be **colors[]**?
}

我知道在返回函数之前发生了什么，但后来我很难理解如何将颜色注入html？

如有任何帮助或提示，我们将不胜感激。

Answer 1

我认为你真的很接近，但缺少了一些关键的东西。

首先，当您说onmouseover="change()"时，这意味着它将在每次鼠标悬停运行时运行change()，而不是使用addEventListener(change())，后者将运行change返回的函数作为事件处理程序。

其次要更改元素，您所需要做的就是获取元素的句柄并设置背景。

下面的代码做了我认为您试图做的事情，但更简单。我希望它能有所帮助。

// setup our colors and state once
colors = ['#00b0e2', '#e3144e', '#15e39b'];
count = -1;
var change = function(element) {
  element.style.background = colors[++count % colors.length]; 
}

<!-- Pass in the element when creating the change listener -->
<div id="box" style="background:grey;" onmouseenter="change(this)">
  Give our box some contents so we can see it.
</div>

解释：

循环背后的基本概念是我们有一个CCD_ 5，它告诉我们CCD_。

当mouseover发生时，一行中会发生三件事。

• ++count：这会将1添加到count，但与count++不同，它是在使用值之前添加的。意味着第一次出现mouseover时，count的值为0

• count % colors.length：这只是让我们在第一种颜色达到最后一种颜色后就可以绕到第一种颜色。%（模）算子给出余数。CCD_ 17将返回除CCD_ 18之后的余数。如果count = 0，count % 3产生0，但如果count = 4，count % 3产生1。你可以在MDN 上阅读更多关于这个和其他算术运算符的信息

• element.style.background = colors[...]：这将backgroundcss属性设置为我们在上一步中选择的颜色。

因此，把所有这些放在一起，这里是change函数，分解为3行。

var change = function(element){
    count++; //increment count before using it.
    var our_color = count % colors.length; // wrap properly
    element.style.background = colors[our_color];
}