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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
TypeScript入门-接口
Mar 30 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
JavaScript修改注册表实例代码
Jan 05 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
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python实现的发邮件功能示例
2019/09/11 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
python 爬取小说并下载的示例
2020/12/07 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
2014年元旦感言
2014/03/06 职场文书
年终总结会主持词
2014/03/25 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
六一亲子活动感想
2015/08/07 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android