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 笔记 事件
Nov 02 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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 开发工具
2006/12/06 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php限制ip地址范围的方法
2015/03/31 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
Python列表计数及插入实例
2014/12/17 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python3 replace()函数使用方法
2018/03/19 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python实现超级马里奥
2020/03/18 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
详解python中的闭包
2020/09/07 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
JS数组去重详情
2021/11/07 Javascript