javascript生成随机颜色示例代码
更新时间：2014年05月05日 09:38:44 作者：
这篇文章主要介绍了使用javascript如何生成随机颜色,需要的朋友可以参考下
复制代码 代码如下:
<!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>
相关文章
有时候我们需要对日期不足两位进行补零操作，或对一些数字不足多少位就补零。下面的函数就非常实用了，大家可以根据需要选择。2009-03-03
本篇文章主要介绍了理解javascript async的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，最近在项目中用到了这款插件，于是在这里给大家分享下使用方法和心得。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了微信小程序实现简单购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
showModalDialog在谷歌浏览器下会返回Null的解决方法
showModalDialog的返回值在IE、火狐下面都能够获取返回值，但是在谷歌浏览器下面会返回Null，下面有个不错的解决方法，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了checkbox实现全选和全取消实例代码，有需要的朋友可以参考一下2013-11-11
javascript 实现滚动效果代码整理，需要的朋友可以参考下。2010-03-03
then()方法用于指定当前实例状态发生改变时的回调函数。它返回一个新的Promise实例。下面这篇文章主要给大家介绍了关于JS中Promise函数then的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧2018-07-07
这篇文章主要为大家详细介绍了微信小程序实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了微信小程序image图片加载完成监听，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
最新评论