JavaScript實(shí)現(xiàn)簡單生成隨機(jī)顏色的方法

第JavaScript實(shí)現(xiàn)簡單生成隨機(jī)顏色的方法本文實(shí)例講述了JavaScript實(shí)現(xiàn)簡單生成隨機(jī)顏色的方法。分享給大家供大家參考，具體如下：

如果要做出如下效果，每次刷新網(wǎng)頁則產(chǎn)生一種顏色

其實(shí)非常簡單，產(chǎn)生隨機(jī)顏色的根本核心就是隨機(jī)構(gòu)造出一個六位數(shù)，JavaScript的隨機(jī)數(shù)的問題

而且這個六位數(shù)的每一個數(shù)位0~f之內(nèi)，因此就有了如下的方法：

1、首先是一個HTML布局，p標(biāo)簽是是用來放當(dāng)前顏色的，div的背景顏色就是這個顏色

!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd"

html

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"

titlerandomColor/title

/head

body

pid="colorStr"/p

divid="div1"/div

/body

/html

2、之后是核心的腳本：

script

//顏色字符串

varcolorStr="";

//字符串的每一字符的范圍

varrandomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

//產(chǎn)生一個六位的字符串

for(vari=0;ii++){

//15是范圍上限，0是范圍下限，兩個函數(shù)保證產(chǎn)生出來的隨機(jī)數(shù)是整數(shù)

colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];

document.getElementById("colorStr").innerHTML="顏色為：#"+colorStr;

document.getElementById("div1").style.backgroundColor="#"+colorStr;

/script

PS：這里再為大家提供幾款功能類似的在線工具供大家參考：

在線隨機(jī)數(shù)字/字符串生成工具：

/aideddesign/suijishu

在線隨機(jī)字符/隨機(jī)密碼生成工具：

/aideddesign/rnd_password

在線RGB、HEX顏色代碼生成器：

/color/rgb_color_generator

RGB顏色查詢對照表_顏色代碼表_顏色的英文名稱大全：

/color/jPicker

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《Jav