js實現(xiàn)點擊按鈕后給Div圖層設置隨機背景顏色的方法
本文實例講述了js實現(xiàn)點擊按鈕后給Div圖層設置隨機背景顏色的方法。分享給大家供大家參考。具體如下:
給myDiv設置隨機背景顏色,用隨機顏色代碼賦值給DIV的背景顏色
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js設置隨機顏色 </title> </head> <body> <script type="text/javascript"> function getcl(){ var arr = []//定義一個空的數(shù)組 i =0;//為while循環(huán)定義i的初始值 C = '0123456789ABCDEF'; //定義顏色代碼的字符串 while(i++ < 6){//循環(huán)6次 x=Math.random()*16; //取0-16之間的隨機數(shù)給變量x b=parseInt(x);//取0-16之前的整數(shù)給變量b c=C.substr(b,1); //由第b(0-16之間的整數(shù))位開始取一個字符 arr.push(c); //通過6次循環(huán)得到的隨機位置取得的字符組合在一起把值給到arr這個數(shù)組 } var cl = "#"+ arr.join(''); //去掉之前數(shù)組之間的逗號,前面再加一個井號, //這樣顏色隨機的顏色代碼就生成了,并且把顏色代碼賦值給變量cl return cl;//把cl的值返回給函數(shù)getcl() } document.write(cl); //輸出cl測試一下結(jié)果 //下面開始給div的背景顏色賦值 function setColor(){ //新建一個設置顏色的函數(shù)setColor document.getElementById("myDiv").style.backgroundColor = getcl(); //把上面得到的隨機顏色代碼賦值給DIV的背景顏色 } </script> <div id="myDiv" style="width:200px;height:200px;"></div> <input type="button" value="給myDiv設置隨機背景顏色" onclick="setColor()" /> </body> </html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07Javascript 實現(xiàn)微信分享(QQ、朋友圈、分享給朋友)
這篇文章主要介紹了Javascript 實現(xiàn)微信分享(QQ、朋友圈、分享給朋友)的相關資料,需要的朋友可以參考下2016-10-10JS對話框_JS模態(tài)對話框showModalDialog用法總結(jié)
本篇文章主要是對JS對話框_JS模態(tài)對話框showModalDialog的用法進行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01讓html元素隨瀏覽器的大小自適應垂直居中的實現(xiàn)方法
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應垂直居中的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)
小程序獲取用戶信息這部分其實不難,但是,他有點麻煩,下面這篇文章主要給大家介紹了關于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08javascript textContent與innerText的異同分析
因為發(fā)現(xiàn)網(wǎng)絡上很少有這方面的內(nèi)容,因此就把自己私有blog上的這篇文章搬出來到Boluor的公開blog,方便其它人查閱。2010-10-10