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（170,170,170）”

然后你需要解析并转换这个字符串：

//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后附加到你的Span并用document.getElementById()

获得它

这里有Example Fiddle

显示所选随机颜色的十六进制

5 个答案: