时间戳

首页 > 解决方案 > 打印的十六进制颜色代码与真实背景颜色不匹配

javascript - 打印的十六进制颜色代码与真实背景颜色不匹配

问题描述

我的网站的目的是通过点击一个按钮找到一个十六进制颜色代码，而网站的背景是自己随机改变的。但是，单击按钮时，打印的颜色代码与当前背景颜色不匹配。我怎样才能解决这个问题？

const infiniteColorChange = setInterval(() => {
  setColor()
  }, 5000);

function setColor() {
   document.body.style.backgroundColor = getRandomColor(); 
  } 

function getRandomColor() {
  for(let y = 0; y < 16777215; y++) {
    const randomNumber = Math.floor(Math.random()*16777215);
    return "#" + randomNumber.toString(16);
  }
}

function stopColor() {
  clearInterval(infiniteColorChange);
  document.getElementById("hexcode").innerHTML = getRandomColor(); // printed code does not match with bg
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What color is it</title>
</head>
<body>
    <h1>What color is it ...</h1>
    
    <h2 id="hexcode"></h2>

    <div id="center">
        <input type="button" onclick="stopColor()" class="button" value="Find A Color Code For Me">        
    </div> <!-- onclick stop loop -->
</body>
</html>

标签： javascript

解决方案

为什么要生成另一种随机颜色来显示？你真的永远不会得到你设置的颜色。

您应该从style属性中检索到它（或将其存储在某处）。

document.getElementById("hexcode").innerHTML = document.body.style.backgroundColor;

这至少显示了与背景颜色相匹配的rgb(123, 45, 67)内容。如果你想要这种#rrggbb格式，你可能需要做一些额外的工作。

推荐阅读