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 相关文章推荐
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
smarty实例教程
2006/11/19 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
初识laravel5
2015/03/02 PHP
提高php编程效率技巧
2015/08/13 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
自行车租赁公司创业计划书
2014/01/28 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
2015年高中班级工作总结
2015/07/21 职场文书