javascript生成随机颜色

javascript 专栏收录该内容
7 篇文章 0 订阅
<!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>

展开阅读全文
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值