手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript生成随机颜色示例代码
javascript生成随机颜色示例代码
摘要:复制代码代码如下:body{font-size:12px;font-family:"CourierNew",Courier,monospac...

复制代码 代码如下:

<!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正则表达式总结

JavaScript生成福利彩票双色球号码

javascript中FOREACH数组方法使用示例

Javascript进制转换实例

javascript实现链接单选效果

javascript实现youku的视频代码自适应宽度

Javascript随机显示图片的源代码

javascript实现日期按月份加减

javascript的 {} 语句块详解

javascript瀑布流式图片懒加载实例

精品推荐
分类导航