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中最常用的继承模式 组合继承
Aug 12 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
DOM事件探秘篇
Feb 15 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
详解datagrid使用方法(重要)
Nov 06 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 Curl多线程原理实例详解
2013/11/06 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python爬虫 requests-html的使用
2020/11/30 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python如何实现递归转非递归
2021/02/25 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
大学校务公开实施方案
2014/03/31 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
Java 数组的使用
2022/05/11 Java/Android