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写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JavaScript利用键盘码控制div移动
Mar 19 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python中global与nonlocal比较
2014/11/21 Python
python检测是文件还是目录的方法
2015/07/03 Python
分享python数据统计的一些小技巧
2016/07/21 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
活动总结模板
2014/05/09 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
小学数学教学随笔
2015/08/14 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python