<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body{
font-size:12px;
font-family: "Courier New", Courier, monospace;
letter-spacing:5px;
}
ul{
List-style:none;
}
li{
width:130px;
height:130px;
line-height:130px;
Vertical-align:middle;
Text-align:center;
Float:left;
margin-left:20px;
}
</style>
<script src= "Http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<title>javascript Generate random Color </title>
<script type= "Text/javascript" >
$ (function () {
$ ("ul Li"). each (function () {
$ (this). CSS ("Background-color", Getrandomcolor ());
});
})
function Getrandomcolor ()
{
var c = ' # ';
var cArray = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ';
for (var i = 0; i < 6;i++)
{
var cindex = Math.Round (Math.random () *15);
C + + Carray[cindex];
}
return C;
}
</script>
<body>
<div>
<ul>
<li> First color block </li>
<li> Second color block </li>
<li> A third color block </li>
<li> Fourth color block </li>
</ul>
</div>
</body>
