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

Question

编辑 ：我唯一的问题是缺少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> 

Answer 1

这段代码将在鼠标悬停在按钮上的同时每秒更改颜色-如果这不是您的意图，那么唯一的问题就是缺少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> 

Answer 2

每次将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> 

Answer 3

尝试用以下代码替换您的代码

 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> 

Answer 4

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

Answer 5

我唯一的问题是缺少jQuery