<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>js設(shè)置隨機(jī)顏色 </title> 
</head>
<body>
<script type="text/javascript">
 function getcl(){
 var arr = []//定義一個(gè)空的數(shù)組
 i =0;//為while循環(huán)定義i的初始值
 C = '0123456789ABCDEF';
 //定義顏色代碼的字符串
 while(i++ < 6){//循環(huán)6次
 x=Math.random()*16;
 //取0-16之間的隨機(jī)數(shù)給變量x
 b=parseInt(x);//取0-16之前的整數(shù)給變量b
 c=C.substr(b,1);
 //由第b（0-16之間的整數(shù)）位開始取一個(gè)字符
 arr.push(c);
 //通過6次循環(huán)得到的隨機(jī)位置取得的字符組合在一起把值給到arr這個(gè)數(shù)組
 }
 var cl = "#"+ arr.join('');
 //去掉之前數(shù)組之間的逗號(hào)，前面再加一個(gè)井號(hào)，
 //這樣顏色隨機(jī)的顏色代碼就生成了，并且把顏色代碼賦值給變量cl
 return cl;//把cl的值返回給函數(shù)getcl()
 }
document.write(cl);
 //輸出cl測試一下結(jié)果
 //下面開始給div的背景顏色賦值
 function setColor(){
 //新建一個(gè)設(shè)置顏色的函數(shù)setColor
 document.getElementById("myDiv").style.backgroundColor = getcl();
 //把上面得到的隨機(jī)顏色代碼賦值給DIV的背景顏色
 } 
</script>
<div id="myDiv" style="width:200px;height:200px;"></div>
<input type="button" value="給myDiv設(shè)置隨機(jī)背景顏色" 
onclick="setColor()" />
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

使用微信小程序開發(fā)彈出框應(yīng)用實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了使用微信小程序開發(fā)彈出框功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-10-10
JavaScript設(shè)計(jì)模式之建造者模式實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之建造者模式,結(jié)合實(shí)例形式分析了設(shè)計(jì)模式中建造者模式的概念、功能及JavaScript實(shí)現(xiàn)與使用建造者模式的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Javascript 實(shí)現(xiàn)微信分享（QQ、朋友圈、分享給朋友）
這篇文章主要介紹了Javascript 實(shí)現(xiàn)微信分享（QQ、朋友圈、分享給朋友）的相關(guān)資料,需要的朋友可以參考下
2016-10-10
小程序如何寫動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序如何寫動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JS根據(jù)生日算年齡的方法
這篇文章主要介紹了JS根據(jù)生日算年齡的方法,涉及javascript操作時(shí)間的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下
2015-05-05
JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog用法總結(jié)
本篇文章主要是對(duì)JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)
小程序獲取用戶信息這部分其實(shí)不難,但是,他有點(diǎn)麻煩,下面這篇文章主要給大家介紹了關(guān)于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
javascript textContent與innerText的異同分析
因?yàn)榘l(fā)現(xiàn)網(wǎng)絡(luò)上很少有這方面的內(nèi)容，因此就把自己私有blog上的這篇文章搬出來到Boluor的公開blog，方便其它人查閱。
2010-10-10