手机
当前位置:查字典教程网 >编程开发 >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基于DOM实现权限选择实例分析

javascript常用方法总结

javascript实现淡蓝色的鼠标拖动选择框实例

javascript的 {} 语句块详解

javascript实现table表格隔行变色的方法

JavaScript事件的理解

javascript每日必学之运算符

Javascript随机显示图片的源代码

精品推荐
分类导航