时间戳

首页 > 解决方案 > 使用随机颜色的背景生成器，但我在 javascript 文件上收到警告消息

javascript - 使用随机颜色的背景生成器，但我在 javascript 文件上收到警告消息

问题描述

我尝试添加随机按钮以自动更改背景颜色，但出现此错误。如何更好地开发此代码。

指定的值“rgb(182,22,242)”不符合要求的格式。格式为“#rrggbb”，其中 rr、gg、bb 是两位十六进制数。

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button = document.getElementById("random");


function gradientcolor() {
    body.style.background =
        "linear-gradient(to right,"
        + color1.value
        + ","
        + color2.value
        + ")";
    css.textContent = body.style.background + ";";
}
function random() {
    var x = Math.floor(Math.random()* 255);
    var y = Math.floor(Math.random()* 255);
    var z = Math.floor(Math.random()* 255);
    color1.value = "rgb(" + x + "," + y + "," + z + ")";
}
button.addEventListener("click",random);

color1.addEventListener("input", gradientcolor);
color2.addEventListener("input", gradientcolor);
body{
    background: linear-gradient(to right, red,yellow);
    text-align:center;
    font-family: 'Mukta', sans-serif;
text-transform:uppercase;

}
h1{
    color:rgba(0,0,0,0.5);
    letter-spacing: 1rem;;
    font-size: 100;
    
}
h2{
    color:rgba(0,0,0,0.5);
    letter-spacing:0.3em;
}
<html>
    <head>
        <title>background generator</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body id="gradient">
        <h1> background Generator</h1>
        <input class="color1" type="color" name="color1" value="#FF0000">
        <input class="color2" type="color" name="color1" value="#00FF00">
        <h2>current css background</h2>
        <h3></h3>
        <button id="random">click me</button>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

我试图在我的代码中找到错误，但我还是不明白

标签： javascripthtmlcss

解决方案

HTML5 规范不允许颜色输入类型值属性的 RGB 值，只允许简单的颜色名称或 HEX 值。

HTML5 输入颜色规范

值净化算法如下：如果元素的值是有效的简单颜色，则将其设置为转换为ASCII小写的元素的值；否则，将其设置为字符串“#000000”。

始终注意尝试并遵守规范，以便它可以跨浏览器工作，并且您不会遇到任何错误。

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button = document.getElementById("random");


function gradientcolor() {
  body.style.background =
    "linear-gradient(to right," +
    color1.value +
    "," +
    color2.value +
    ")";
  css.textContent = body.style.background + ";";
}

function random() {
  const red = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
  const green = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
  const blue = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
  color1.value = `#${red}${green}${blue}`;
}
button.addEventListener("click", () => { random(); gradientcolor(); });

color1.addEventListener("input", gradientcolor);
color2.addEventListener("input", gradientcolor);
body {
  background: linear-gradient(to right, red, yellow);
  text-align: center;
  font-family: 'Mukta', sans-serif;
  text-transform: uppercase;
}

h1 {
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 1rem;
  ;
  font-size: 100;
}

h2 {
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.3em;
}
<html>

<head>
  <title>background generator</title>
  <link rel="stylesheet" href="style.css">
</head>

<body id="gradient">
  <h1> background Generator</h1>
  <input class="color1" type="color" name="color1" value="#FF0000">
  <input class="color2" type="color" name="color1" value="#00FF00">
  <h2>current css background</h2>
  <h3></h3>
  <button id="random">click me</button>
</body>

</html>

推荐阅读