编程 Javascript

javascript生成随机颜色示例代码

Posted in Javascript onMay 05, 2014

<!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> 
<div> 
<ul> 
<li>第一个色块</li> 
<li>第二个色块</li> 
<li>第三个色块</li> 
<li>第四个色块</li> 
</ul> 
</div> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 防止刷新,后退,关闭

Aug 07 Javascript

5个javascript的数字格式化函数分享

Dec 07 Javascript

js数组与字符串的相互转换方法

Jul 09 Javascript

js实现超简单的展开、折叠目录代码

Aug 28 Javascript

js实现创建删除html元素小结

Sep 30 Javascript

原生js编写autoComplete插件

Apr 13 Javascript

js 将input框中的输入自动转化成半角大写（税号输入框）

Feb 16 Javascript

基于ES6作用域和解构赋值详解

Nov 03 Javascript

结合mint-ui移动端下拉加载实践方法总结

Nov 08 Javascript

取消Bootstrap的dropdown-menu点击默认关闭事件方法

Aug 10 Javascript

JavaScript switch语句使用方法简介

Dec 30 Javascript

element中table高度自适应的实现

Oct 21 Javascript

借助javascript代码判断网页是静态还是伪静态

May 05 #Javascript

javascript中的nextSibling使用陷(da)阱(keng)

May 05 #Javascript

利用函数的惰性载入提高javascript代码执行效率

May 05 #Javascript

JavaScript加入收藏夹功能（兼容IE、firefox、chrome）

May 05 #Javascript

IE 下Enter提交表单存在重复提交问题的解决方法

May 04 #Javascript

javascript 获取元素样式必杀技

May 04 #Javascript

javascript操作excel生成报表全攻略

May 04 #Javascript