<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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生成随机颜色</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> </head> <body> <p> <ul> <li>第一个色块</li> <li>第二个色块</li> <li>第三个色块</li> <li>第四个色块</li> </ul> </p> </body> </html>