更改颜色代码无效
[英]Changing color code doesn't work
问题描述
function color(){ var color = "#" for(var i = 0; i<6; i++){ color += Math.floor((Math.random()*16)).toString(16); }; document.getElementsByTagName('body')[0].style.backgroundColor = color; } function change(){ setInterval(color(), 1000); }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id='button' onmouseover="change();" style='width:50px; height:50px; margin-left:auto;'>click</button> <script type="text/javascript" src='js.js'></script> </body> </html>
I tried to make the auto changing background coding. 
我试图进行自动更改背景编码。
I want to change the background color every 1 second. 我想每1秒更改一次背景色。 but it just change color once when i put my mouse on. 但是当我戴上鼠标时，它只会改变一次颜色。
what is the problem? 问题是什么？
5 个解决方案
解决方案1
6 已采纳 2016-07-03 11:30:15
You're calling the function, not referencing it in the setInterval call. 您正在调用该函数，而不是在setInterval调用中引用它。
Change it to 更改为
setInterval(color, 1000);
When you add the parentheses to a function, it's called, and the returned result, which is always undefined unless something else is defined in the called function, will be returned. 当您将括号添加到函数时，将调用它，并且返回的结果（除非在被调用函数中定义了其他内容，否则始终是undefined将被返回。
What you're doing is the same as 你在做什么与
var fn = color(); // returns undefined
setInterval(fn, 1000); // undefined, 1000
解决方案2
0 2016-07-03 11:35:44
Here's a working snippet. 这是一个工作片段。 What I changed was 我改变的是
-
onmousehoverwas replaced withoneclick()(since it says click on the button)onmousehover已替换为onmousehoveroneclick()（因为它说单击了按钮） - In the
setIntervalfunction call,colordoesn't need the brackets在setInterval函数调用中，color不需要括号
function color(){ var color = "#" for(var i = 0; i<6; i++){ color += Math.floor((Math.random()*16)).toString(16); }; document.getElementsByTagName('body')[0].style.backgroundColor = color; } function change(){ setInterval(color, 1000); }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id='button' onclick="change();" style='width:50px; height:50px; margin-left:auto;'>click</button> <script type="text/javascript" src='js.js'></script> </body> </html> </html>
解决方案3
0 2016-07-03 11:37:04
Here is a working example 这是一个有效的例子
<body> <button id='button' onmouseover="change()" style='width:50px; height:50px; margin-left:auto;'>click</button> </body> <script> function color() { var color = "#" for (var i = 0; i < 6; i++) { color += Math.floor((Math.random() * 16)).toString(16); }; document.getElementsByTagName('body')[0].style.backgroundColor = color; } function change() { setInterval(color(), 1000); } </script>
Fiddle: https://jsfiddle.net/9cxw9jL0/ 小提琴： https : //jsfiddle.net/9cxw9jL0/
解决方案4
0 2016-07-03 12:18:51
我更改了一些代码，您可以在plunker中找到。
<https://plnkr.co/edit/sKpJQqRohICD63AQjgTx?p=preview>
解决方案5
-1 2016-07-03 11:52:56
Here is the solution for your problem 这是您的问题的解决方案
function colorchanger(){ setInterval(function(){ var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } document.body.style.backgroundColor = color; },300); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <button onclick="colorchanger();" >Change Color</button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.