當前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > RGB顏色在線轉(zhuǎn)換JS代碼怎么寫

RGB顏色在線轉(zhuǎn)換JS代碼怎么寫

2012/11/2 11:18:52作者:佚名來源:網(wǎng)絡(luò)

移動端

【實例名稱】

RGB顏色在線轉(zhuǎn)換JS代碼

【實例描述】

RGB是一個用10進制數(shù)值表示顏色的方法,由R、G、B3部分組成.每部分的值都不能超過255。本例學(xué)習(xí)如何將顏色的RGB表示轉(zhuǎn)換為16進制表示。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>標題頁-學(xué)無憂(yzddtk.cn)</title> <SCRIPT LANGUAGE="JavaScript"> function showRGB(f) { //獲取用戶輸入的RGB值 red = f.red.value; green = f.green.value; blue = f.blue.value; //將RGB轉(zhuǎn)換為16進制Hex值 hexcode = "#" +toHex(red) + toHex(green) + toHex(blue); document.bgColor  = f.hexval.value = hexcode; } function toHex(d){ if (isNaN(d)){ d=0; } //16進制轉(zhuǎn)換方法 var n=new Number(d).toString(16); return (n.length==1?"0"+n:n); } </script> </head> <body> <form name="rgbform"> <b>請輸入RGB顏色值(0 to 255)</b><br> Red:   <input type="text" name="red" size="5"><br> Green: <input type="text" name="green" size="5"><br> Blue:  <input type="text" name="blue" size="5"><br> <input type="button" value="顯示Hex #" onClick="showRGB(this.form)"> Hex值為:  <input type="text" name="hexval" size="7"> </form> </body> </html>

【運行效果】

 RGB顏色在線轉(zhuǎn)換運行效果

【難點剖析】

本例的難點在于進制間的轉(zhuǎn)換。代碼中使用“toHex”方法實現(xiàn)10進制到16進制的轉(zhuǎn)換,但主要靠“toString”方法實理.此方法帶一個參數(shù)表示要轉(zhuǎn)換的進制。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準確性,你可以點擊:RGB顏色在線轉(zhuǎn)換 進行本實例源碼下載 

標簽: RGB  顏色  JS代碼