javascript生成随机颜色

最新推荐文章于 2023-12-28 13:03:54 发布

BCance

最新推荐文章于 2023-12-28 13:03:54 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： js 随机随机生成颜色

本文链接：https://blog.csdn.net/BCance/article/details/25000441

版权

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>

BCance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript生成随机颜色

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-al
复制链接

扫一扫