отображает шестнадцатеричный случайный цвет

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

Добавить пролетом с заданным идентификатором и его содержание в выбранный цвет, как это:

<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]); 

Это х, то вы можете добавить к вашей Span после вы дали ему идентификатор и получили его с document.getElementById()

И здесь Example Fiddle