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作为事件处理程序。

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

以下代码执行我认为您尝试做的事情，但更简单。我希望它有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>解释

循环背后的基本概念是我们有count告诉我们colors[count]当前有效。

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

++count：这会将1添加到count，但与count++不同，它会在使用该值之前执行此操作。这意味着第一次出现mouseover时，count的值为0
count % colors.length：这只是让我们在第一种颜色到达最后一种颜色时回绕它。 %（模数）运算符给出余数。在a % b分割后，a / b将返回余数。如果count = 0，count % 3产生0，但如果count = 4，则count % 3产生1.您可以在MDN
element.style.background = colors[...]：这会将background css属性设置为我们在上一步中选择的颜色。

所以要把它们放在一起，这里的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];
}

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

1 个答案: