手机
当前位置:查字典教程网 >编程开发 >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的 {} 语句块详解

javascript去除空格方法小结

javasript实现密码的隐藏与显示

实用javaScript技术-屏蔽类

JavaScript中用于生成随机数的Math.random()方法

javascript基于DOM实现权限选择实例分析

javascript操作表格

JavaScript基本语法讲解

精品推荐
分类导航