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

标签 javascript jquery html css

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


我的 code应该在每次鼠标悬停时生成一种新颜色,但它不起作用你能告诉我问题出在哪里吗?

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>

关于Javascript - 每次鼠标悬停时生成新颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35392055/

相关文章:

javascript - 用 css 样式总结内联样式的值

javascript - 根据条件使用 jquery 进行样式设置

javascript - 这是 JavaScript 内存泄漏吗?

html - 如何在固定位置显示一个 ul 作为子菜单?

javascript - 事件委托(delegate)的事件冒泡

javascript - 使用导航菜单显示隐藏 html 代码/内容

javascript - 音乐播放器仅从一个文件夹播放

javascript - 如何将 css 样式应用于带有 td 和 input 标签的动态 tr?

jquery - fullCalendar 不动态渲染新事件

html - 使 CSS 下拉内容向右对齐而不是向左对齐