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 web页面刷新的方法收集
Jul 02 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 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常用函数小技巧
2008/09/11 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
JavaScript函数详解
2015/02/27 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python生成不重复随机值的方法
2015/05/11 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
int在python中的含义以及用法
2019/06/27 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python读文件的步骤
2019/10/08 Python
python如何写try语句
2020/07/14 Python
python 实现音频叠加的示例
2020/10/29 Python
python 元组和列表的区别
2020/12/30 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
《蚕姑娘》教学反思
2014/04/15 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
会议简报格式范文
2015/07/20 职场文书
js之ajax文件上传
2021/05/13 Javascript
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Python Pandas常用函数方法总结
2021/06/15 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫