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 文章截取部分无损html显示实现代码
May 04 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
vue数据初始化initState的实例详解
Apr 11 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
javascript History对象原理解析
Feb 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常量详细解析
2015/10/27 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
理解javascript对象继承
2016/04/17 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
js实现车辆管理系统
2020/08/26 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python getpass模块用法及实例详解
2019/10/07 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
学校七一活动方案
2014/01/19 职场文书
师范生自荐信模板
2014/05/28 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
python中super()函数的理解与基本使用
2021/08/30 Python