快捷導(dǎo)航

javascript生成隨機(jī)顏色示例代碼

更新時(shí)間：2014年05月05日 09:38:44 作者：

這篇文章主要介紹了使用javascript如何生成隨機(jī)顏色,需要的朋友可以參考下

 
<!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生成隨機(jī)顏色</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>第一個(gè)色塊</li> 
<li>第二個(gè)色塊</li> 
<li>第三個(gè)色塊</li> 
<li>第四個(gè)色塊</li> 
</ul> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

隨機(jī)顏色

相關(guān)文章

javascript 補(bǔ)零函數(shù)集合
有時(shí)候我們需要對日期不足兩位進(jìn)行補(bǔ)零操作，或?qū)σ恍?shù)字不足多少位就補(bǔ)零。下面的函數(shù)就非常實(shí)用了，大家可以根據(jù)需要選擇。
2009-03-03
理解javascript async的用法
本篇文章主要介紹了理解javascript async的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
codeMirror插件使用講解
codeMirror是一款十分強(qiáng)大的代碼編輯插件，提供了十分豐富的API，最近在項(xiàng)目中用到了這款插件，于是在這里給大家分享下使用方法和心得。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
微信小程序?qū)崿F(xiàn)簡單購物車小功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單購物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
showModalDialog在谷歌瀏覽器下會(huì)返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值，但是在谷歌瀏覽器下面會(huì)返回Null，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-11-11
JS小功能(checkbox實(shí)現(xiàn)全選和全取消)實(shí)例代碼
這篇文章主要介紹了checkbox實(shí)現(xiàn)全選和全取消實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
javascript 實(shí)現(xiàn)滾動(dòng)效果代碼整理
javascript 實(shí)現(xiàn)滾動(dòng)效果代碼整理，需要的朋友可以參考下。
2010-03-03
JS中Promise函數(shù)then的奧秘探究
then()方法用于指定當(dāng)前實(shí)例狀態(tài)發(fā)生改變時(shí)的回調(diào)函數(shù)。它返回一個(gè)新的Promise實(shí)例。下面這篇文章主要給大家介紹了關(guān)于JS中Promise函數(shù)then的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧
2018-07-07
微信小程序?qū)崿F(xiàn)select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
微信小程序image圖片加載完成監(jiān)聽
這篇文章主要為大家詳細(xì)介紹了微信小程序image圖片加載完成監(jiān)聽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08