隨機顏色選擇顯示十六進制

Question

我正在建立一個隨機背景顏色選擇器只是爲了好玩。

很簡單..當你點擊一個按鈕頁面刷新，並從幾種不同顏色的數組中選擇背景顏色。

現在我想要做的是我想顯示在純html中的當前顏色的十六進制，我真的是新的JS，所以我不知道如何做到這一點。任何人都可以幫我嗎？

這裏是我的代碼：

<script> 
    var bgcolorlist=new Array("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1") 
    document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)] 
</script> 

<form><input type=button value="click here forever" onClick="window.location.reload()"></form> 
<center> 
<p>This colour is: </p> 
</div> 

Answer 1

添加跨度與給定的ID和設置其內容所選擇的顏色是這樣的：

<script> 
    var bgcolorlist=new Array("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1"); 
    var randomColor = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]; 
    document.body.style.background = randomColor; 
</script> 

<form><input type=button value="click here forever" onClick="window.location.reload()"></form> 

<center> 
<p>This colour is: <span id='color'></span></p> 

<script> 
    document.getElementById("color").innerHTML = randomColor; // Writes the color to the span    
</script> 

觀看演示在這裏： http://jsfiddle.net/2LQNh/

Answer 2

您可以將值Math.floor(Math.random()*bgcolorlist.length) 存儲在變量中，並且當需要顯示當前的十六進制時，請使用此變量。

Answer 3

使用@RononDex溶液中，用

Function() 

和沒有重新加載升級它。

看到這裏http://jsfiddle.net/MGzCE/

Answer 4

試試這個

HTML

<p>This colour is: <b id="resu"></b></p> 

jQuery中

var image = new Array ("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1"); 
var size = image.length 
var x = Math.floor(size*Math.random()) 

$('body').css('background-color',image[x]); 
$('#resu').text(image[x]); 

在Javascript中

var bgcolorlist=new Array("#F70000","#B9264F","#990099","#74138C","#0000CE","#1F88A7","#4A9586","#FF2626","#D73E68","#B300B3","#8D18AB","#5B5BFF","#25A0C5","#5EAE9E","#FF5353","#DD597D","#CA00CA","#A41CC6","#7373FF","#29AFD6","#74BAAC","#FF7373","#E37795","#D900D9","#BA21E0","#8282FF","#4FBDDD","#8DC7BB","#FF8E8E","#E994AB","#FF2DFF","#CB59E8","#9191FF","#67C7E2","#A5D3CA","#FFA4A4","#EDA9BC","#F206FF","#CB59E8","#A8A8FF","#8ED6EA","#C0E0DA","#FFB5B5","#F0B9C8","#FF7DFF","#D881ED","#B7B7FF","#A6DEEE","#CFE7E2","#FFC8C8","#F4CAD6","#FFA8FF","#EFCDF8","#C6C6FF","#C0E7F3","#DCEDEA","#FFEAEA","#F8DAE2","#FFC4FF","#EFCDF8","#DBDBFF","#D8F0F8","#E7F3F1") 
var col = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]; 
document.body.style.background = col; 
document.getElementById("resu").innerHTML = col; 

Answer 5

首先，你需要得到身體的顏色，這樣就可以實現通過：

var bgColor = window.getComputedStyle(document.body,null).getPropertyValue('background-color'); 

返回你像一個字符串「RGB（170170170）」

然後，你需要分析和轉換這個字符串：

//regular expression which returns an array with your 3 decimal values for rgb 
var res = bgColor.toString().match(/[0-9]{3}/g); 

//this converts a decimal to hex 
function componentToHex(c) { 
    var hex = parseInt(c).toString(16); 
    return (hex.length < 2) ? "0" + hex : hex; 
} 

//this concatenates the new string 
function rgbToHex(a, b, c) { 
    return "#" + componentToHex(a) + componentToHex(b) + componentToHex(c); 
} 

//Then you can call it by 
var x = rgbToHex(res[0],res[1],res[2]); 

這X那麼你可以附加到你的跨度，你給它一個ID和document.getElementById()

得到它後

這裏是一個Example Fiddle