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触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
AngularJS表单基本操作
Jan 09 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jQuery实现跨域
2015/02/03 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python pickle模块用法实例
2015/04/14 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python利用ansible分发处理任务
2015/08/04 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
详解Python字符串切片
2019/05/20 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
房屋买卖协议书范本
2014/04/10 职场文书
文化建设工作方案
2014/05/12 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
健康状况证明书
2014/11/26 职场文书
鸟的天堂导游词
2015/01/31 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书