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 相关文章推荐
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 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
配置支持SSI
2006/11/25 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
让您的菜单不离网站
2006/10/03 Javascript
定义select的边框颜色
2008/04/28 Javascript
javascript document.images实例
2008/05/27 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Python os模块学习笔记
2015/06/21 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python 解析简单的XML数据
2020/07/24 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
服装发布会策划方案
2014/05/22 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python办公自动化之Excel(中)
2021/05/24 Python
如何理解PHP核心特性命名空间
2021/05/28 PHP
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Python加密技术之RSA加密解密的实现
2022/04/08 Python