Question

颜色在变化，但是当我移开鼠标时，颜色仍在不断变化

var color_text  = document.getElementById('nav');
var color_text1 = document.getElementById('nav1');
var color_text2 = document.getElementById('nav2');
var color_text3 = document.getElementById('nav3');

var color = new Array(4);
color[0] = "blue";
color[1] = "green";
color[2] = "yellow";
color[3] = "red";

function displaycolor() {
  x = Math.floor(Math.random() * color.length)
  color_text.style.color = color[x];
  setTimeout(displaycolor, 1000);
}

function displaycolor1() {
  x = Math.floor(Math.random() * color.length)
  color_text1.style.color = color[x];
  setTimeout(displaycolor1, 1000);
}

function displaycolor2() {
  x = Math.floor(Math.random() * color.length)
  color _text2.style.color = color[x];
  setTimeout(displaycolor2, 1000);
}

function displaycolor3() {
  x = Math.floor(Math.random() * color.length)
  color_text3.style.color = color[x];
  setTimeout(displaycolor3, 1000);
}

function rmvdis() {
  clearTimeout(); //when mouse leaves
}

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a id="nav"  onmouseover="displaycolor();"  onmouseout="rmvdis();" href="index.html">Home</a></li>
    <li><a id="nav1" onmouseover="displaycolor1();" onmouseout="" href="about.html">About</a></li>
    <li><a id="nav2" onmouseover="displaycolor2();" onmouseout="" href="#">Gallery</a></li>
    <li><a id="nav3" onmouseover="displaycolor3();" onmouseout="" href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">

所以，我希望鼠标移开时颜色变为正常，并且仅当鼠标在顶部时才更改颜色。

Answer 1

您可以使用CSS3动画来实现。

.text {
  font-size: 24px;
  font-weight: bold;
}
.text:hover {
  animation: animateColors 1s infinite;
}
@keyframes animateColors {
  0% { color: red; }
  50% { color: green; }
  100% { color: blue; }
}

<div class="text">Dummy Text</div>

Answer 2

有多种具有不同随机度的解决方案：

解决方案1（非随机且仅用于CSS）：

为了提高性能和简化操作，我建议使用CSS而不是JavaScript：

.nav > li > a {
  color: black;
  text-decoration: none;
}

.nav > li > a:hover {
  animation: color-shift 1s alternate infinite;
}

@keyframes color-shift {
  0%   { color: blue; }
  33%  { color: green; }
  66%  { color: yellow; }
  100% { color: red; }
}

<ul class="nav navbar-nav">
  <li><a id="nav"  href="#">Home</a></li>
  <li><a id="nav1" href="#">About</a></li>
  <li><a id="nav2" href="#">Gallery</a></li>
  <li><a id="nav3" href="#">Contact</a></li>
</ul>

很显然，animation-direction: alternate并没有提供Math.random()的随机性，但是看起来却差不多。

解决方案2（更多随机性和一些JavaScript）：

如果第一个解决方案没有使您的船浮起，您还可以在每次悬停时使用JavaScript获取真正随机的颜色序列（但在一个悬停事件中保持不变）：

function newColors() {
  let colors = ["blue", "green", "yellow", "red"];
  let color_names = ["--color1", "--color2", "--color3", "--color4"];

  colors.forEach(function(color) {
      let random = Math.floor(Math.random() * color_names.length);
  document.documentElement.style.setProperty(color_names.splice(random, 1)[0], color);
  });
}

:root {
  --color1: blue;
  --color2: green;
  --color3: yellow;
  --color4: red;
}

.nav > li > a {
  color: black;
  text-decoration: none;
}

.nav > li > a:hover {
  animation: color-shift 1s alternate infinite;
}

@keyframes color-shift {
  0% {
    color: var(--color1);
  }
  33% {
    color: var(--color2);
  }
  66% {
    color: var(--color3);
  }
  100% {
    color: var(--color4);
  }
}

<ul class="nav navbar-nav">
  <li><a id="nav"  onmouseover="newColors()" href="#">Home</a></li>
  <li><a id="nav1" onmouseover="newColors()" href="#">About</a></li>
  <li><a id="nav2" onmouseover="newColors()" href="#">Gallery</a></li>
  <li><a id="nav3" onmouseover="newColors()" href="#">Contact</a></li>
</ul>

解决方案3（完全随机和JavaScript）：

您还可以只使用JavaScript获得随机的颜色序列（最接近您的解决方案），但是您会发现它看起来更糟，因为在像这样的小型输入集中，真正的随机性似乎非常重复。

const colors = ["blue", "green", "yellow", "red"];
let interval;

document.querySelectorAll(".nav > li > a").forEach(item => {
   item.addEventListener("mouseover", rainbow, false);
   item.addEventListener("mouseout", stop, false);
});
  
function rainbow() {
  this.style.color = colors[Math.floor(Math.random() * colors.length)];
  interval = setTimeout(() => rainbow.call(this), 250);
}

function stop() {
  clearInterval(interval);
  this.style.color = "black";
}

.nav > li > a {
  color: black;
  text-decoration: none;
}

<ul class="nav navbar-nav">
  <li><a id="nav"  href="#">Home</a></li>
  <li><a id="nav1" href="#">About</a></li>
  <li><a id="nav2" href="#">Gallery</a></li>
  <li><a id="nav3" href="#">Contact</a></li>
</ul>

解决方案4（完全随机，但无重复＆JavaScript）：

与解决方案3相同，但没有重复显示颜色：

const colors = ["blue", "green", "yellow", "red"];
let last = -1;
let interval;

document.querySelectorAll(".nav > li > a").forEach(item => {
   item.addEventListener("mouseover", rainbow, false);
   item.addEventListener("mouseout", stop, false);
});
  
function rainbow() {
  let i = Math.floor(Math.random() * colors.length);
  this.style.color = colors[i!==last ? i : i+1];
  interval = setTimeout(() => rainbow.call(this), 250);
  last = i;
}

function stop() {
  clearInterval(interval);
  this.style.color = "black";
}

.nav > li > a {
  color: black;
  text-decoration: none;
}

<ul class="nav navbar-nav">
  <li><a id="nav"  href="#">Home</a></li>
  <li><a id="nav1" href="#">About</a></li>
  <li><a id="nav2" href="#">Gallery</a></li>
  <li><a id="nav3" href="#">Contact</a></li>
</ul>

Answer 3

我已经重构了您的代码：

HTML

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a id="nav"  onmouseover="displaycolor(0);"  onmouseout="rmvdis(0);" href="index.html">Home</a></li>
    <li><a id="nav1" onmouseover="displaycolor(1);" onmouseout="rmvdis(1);" href="about.html">About</a></li>
    <li><a id="nav2" onmouseover="displaycolor(2);" onmouseout="rmvdis(2);" href="#">Gallery</a></li>
    <li><a id="nav3" onmouseover="displaycolor(3);" onmouseout="rmvdis(3);" href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
  </ul>
</div>

JavaScript

var color_text  = document.getElementById('nav');
var color_text1 = document.getElementById('nav1');
var color_text2 = document.getElementById('nav2');
var color_text3 = document.getElementById('nav3');

var color = new Array(4);
color[0] = "blue";
color[1] = "green";
color[2] = "yellow";
color[3] = "red";

var color_texts = [color_text, color_text1, color_text2, color_text3];

var intervalID;

function randomize() {
  return Math.floor(Math.random() * color.length);
}

function displaycolor(index) {
  if (intervalID) return;
  color_texts[index].style.color = color[randomize()];
  intervalID = setInterval(function() {
    color_texts[index].style.color = color[randomize()]
  }, 1000);
}

function rmvdis() {
  clearInterval(intervalID); //when mouse leaves
  intervalID = undefined;
}

说明：您将需要setInterval，并且需要存储间隔的ID并将其传递。您也可以使用超时，但是为此目的使用它是不直观的。我摆脱了重复的功能，改用参数化。

Answer 4

我刚打开它很高兴得到答案，但我也解决了它，我也从您的答案中了解到了，这是我的帮助

var repeater;
var repeater1;
var repeater2;
var repeater3;

var color_text = document.getElementById('nav');
var color_text1 = document.getElementById('nav1');
var color_text2 = document.getElementById('nav2');
var color_text3 = document.getElementById('nav3');

var color = new Array(4);

color[0] = "blue";
color[1] = "green";
color[2] = "yellow";
color[3] = "red";

function displaycolor() {
  x = Math.floor(Math.random() * color.length)
  color_text.style.color = color[x];
}

function displaycolor1() {
  x = Math.floor(Math.random() * color.length)
  color_text1.style.color = color[x];
}

function displaycolor2() {
  x = Math.floor(Math.random() * color.length)
  color_text2.style.color = color[x];
}

function displaycolor3() {
  x = Math.floor(Math.random() * color.length)
  color_text3.style.color = color[x];
}

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a id="nav" onmouseover="repeater=setInterval(displaycolor,100);" onmouseout="color_text.style.color='gray';clearInterval(repeater);" href="index.html">Home</a></li>
    <li><a id="nav1" onmouseover="repeater1=setInterval(displaycolor1,100);" onmouseout="color_text1.style.color='gray';clearInterval(repeater1);" href="about.html">About</a></li>
    <li><a id="nav2" onmouseover="repeater2=setInterval(displaycolor2,100);" onmouseout="color_text2.style.color='gray';clearInterval(repeater2);" href="port/gallery.html">Gallery</a></li>
    <li><a id="nav3" onmouseover="repeater3=setInterval(displaycolor3,100);" onmouseout="color_text3.style.color='gray';clearInterval(repeater3);" href="#">Contact</a></li>
  </ul>

多色文字动画，但仅在悬停时

4 个答案: