如何使用 JavaScript 在 HTML 中随机更改背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9855970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change background color randomly in HTML with JavaScript?
提问by toky
this web page changes the backgrounder color randomly. i am having trouble to do the same thing with "#title" ,but the color stays the same.
此网页随机更改背景颜色。我无法用“#title”做同样的事情，但颜色保持不变。
please help
请帮忙
Thank you
谢谢
JavaScript code:
JavaScript 代码：
function setbackground()
{
window.setTimeout( "setbackground()", 80); // milliseconds delay
var index = Math.round(Math.random() * 9);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if(index == 1)
ColorValue = "66FF33";
if(index == 2)
ColorValue = "FF0000";
if(index == 3)
ColorValue = "FF00FF";
if(index == 4)
ColorValue = "0000FF";
if(index == 5)
ColorValue = "00FFFF";
if(index == 6)
ColorValue = "FFFF00";
if(index == 7)
ColorValue = "CC66FF";
if(index == 8)
ColorValue = "3366FF";
if(index == 9)
ColorValue = "CCCCCC";
document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
}
function setbackgroundTitle()
{
window.setTimeout( "setbackgroundTitle()", 600); // milliseconds delay
var index = Math.round(Math.random() * 4);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if(index == 1)
ColorValue = "66FF33";
if(index == 2)
ColorValue = "FF0000";
if(index == 3)
ColorValue = "FF00FF";
if(index == 4)
ColorValue = "0000FF";
document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue;
}
CSS code:
CSS代码：
#title{
background-color:#11f22f;
height:300px;
width:400px;
margin:25px auto 0 auto;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
html Code:
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HomeWork</title>
<script type="text/javascript" src="crazy.js"> </script>
<link rel="stylesheet" type="text/css" href="HomeWork2.css" />
</head>
<body>
<body onload="setbackground();">
<div id="title" onload="setbackgroundTitle();"> hjhjhkj dfvdfsv dfgvkdfsk dfs</div>
</body>
</html>
采纳答案by godlark
First, copy paste error: instead document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue;there should be document.getElementById("title").style.backgroundColor = "#" + ColorValue;According with that How to make a div onload function?doesn't work.
I've put everything to setbackground() and it works ;)
首先，复制粘贴错误：document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue;应该有document.getElementById("title").style.backgroundColor = "#" + ColorValue;根据那个如何制作div加载功能？不起作用。我已经把所有东西都放到了 setbackground() 并且它有效;)
回答by Ildar
try so:
试试看：
document.getElementById("title").style.backgroundColor = "#" + ColorValue;
回答by Vincent Mimoun-Prat
If that is homework, please tag your question as homework.
如果那是作业，请将您的问题标记为作业。
Else, jQuery would make your life as simple as:
否则，jQuery 会让你的生活变得如此简单：
$("body").css("background", "#456789");
or
或者
$("h1").css("background", "#456789");
回答by Starx
The problem may be that the DOM wasn't loaded when the script was running.
问题可能是脚本运行时未加载 DOM。
Correct your function to this, you are assuming the output of document.getElementById("title")as an array, but its not.
更正你的函数，你假设输出document.getElementById("title")是一个数组，但它不是。
document.getElementById("title").style.backgroundColor = "#" + ColorValue;
And call it on the onload event, to ensure the DOM is loaded properly when the script runs
并在 onload 事件上调用它，以确保脚本运行时正确加载 DOM
window.onload = function() {
setbackgroundTitle();
};
