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闭包
Dec 14 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
对比分析json及XML
Nov 28 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
Javascript Math对象
2009/08/13 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
企业宣传标语
2014/06/09 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
婚宴领导致辞
2015/07/28 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript