Javascript - 每次鼠标悬停时生成新颜色

Javascript - Generate new color on every mouseover

本文关键字：新颜色 颜色 鼠标 悬停 Javascript      更新时间：2023-09-26

Edit ： 我唯一的问题是缺少 jQuery

我的代码应该在每次鼠标悬停时生成一个新颜色，但它不起作用，你能告诉我问题在哪里吗？

var number;
var newColor;
setInterval(function() {
  number = Math.floor((Math.random() * 1000000) + 1);
  newColor = "#" + number;
}, 1000);
$("#myBtn").mouseover(function() {
  $("#myDiv").css("background-color", newColor);
});
div {
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

当鼠标悬停在按钮上时，此代码将每秒更改颜色 - 如果这不是您的意图，那么您遇到的唯一问题是缺少 jQuery

var isOver = false; // only required if colour should change continuously
var newColor;
setInterval(function() {
  var number = Math.floor((Math.random() * 1000000) + 1);
  newColor = "#" + number;
  // next 3 lines only required if colour should change continuously
  if(isOver) {
    $("#myDiv").css("background-color", newColor);
  }
}, 1000);
$("#myBtn").mouseover(function() {
  isOver = true; // only required if colour should change continuously
  $("#myDiv").css("background-color", newColor);
});
// next 3 lines only required if colour should change continuously
$("#myBtn").mouseout(function() {
  isOver = false;
});
div {
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

尝试用以下代码替换代码

var number;
var newColor;
$("#myBtn").mouseover(function() {
  number = Math.floor((Math.random() * 1000000) + 1);
  newColor = "#" + number;
  $("#myDiv").css("background-color", newColor);
});
div {
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

这个会在每mouseover上改变颜色。

我拿出了setInterval，因为我不明白你为什么需要它......？

$("#myBtn").mouseover(function() {
  $("#myDiv").css("background-color", "#" + Math.floor((Math.random() * 1000000) + 1));
});
div {
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="myBtn">Hover Here To Change Color</button>
<div id="myDiv"></div>

在代码笔上它对我有用，如果您想在鼠标悬停而不是鼠标退出时获得新颜色，则应将鼠标输出设置为相同的颜色。

我遇到的唯一问题是缺少jQuery

相关文章：