admin管理员组文章数量:1314573
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.
please help
Thank you
JavaScript code:
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:
#title{
background-color:#11f22f;
height:300px;
width:400px;
margin:25px auto 0 auto;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
html Code:
<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>
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.
please help
Thank you
JavaScript code:
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:
#title{
background-color:#11f22f;
height:300px;
width:400px;
margin:25px auto 0 auto;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
html Code:
<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>
-
In the future, consider using anonymous functions as opposed to strings for
setTimeout.setTimeout(function(){setbackgroundTitle()}, 600);will suffice. – Jeffrey Sweeney Commented Mar 24, 2012 at 21:58 - General code tip: if you have several if statements like this they will all be run each time, even if index is 1. Use a switch statement instead. Or in this case, a even better solution is to store all the color values in an array, and use myColorArray[index] to get your value. – Martin Hansen Commented Mar 24, 2012 at 23:52
- this is the same as stackoverflow./questions/25455485/… – Patrick W. McMahon Commented Aug 27, 2014 at 21:45
4 Answers
Reset to default 1First, 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 ;)
try so:
document.getElementById("title").style.backgroundColor = "#" + ColorValue;
If that is homework, please tag your question as homework.
Else, jQuery would make your life as simple as:
$("body").css("background", "#456789");
or
$("h1").css("background", "#456789");
The problem may be that the DOM wasn't loaded when the script was running.
Correct your function to this, you are assuming the output of document.getElementById("title") as an array, but its not.
document.getElementById("title").style.backgroundColor = "#" + ColorValue;
And call it on the onload event, to ensure the DOM is loaded properly when the script runs
window.onload = function() {
setbackgroundTitle();
};
本文标签： How to change background color randomly in HTML with JavaScriptStack Overflow
版权声明：本文标题：How to change background color randomly in HTML with JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741961681a2407315.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论