javascript - JS 颜色生成器不工作

Question

我正在尝试制作一个网页，其中 JS 将生成两种颜色并在渐变中使用它们。这是我所拥有的:

HTML

<div id="hi"></div>

CSS

div {
width:100px;
height:100px;
}

JS

var hue = Math.floor(Math.random() * 360);
var top = "hsl(" + hue + ",100%,30%";
var bottom = "hsl(" + hue + ",100%,50%)";
document.getElementById('hi').style.background = "linear-gradient(" + top + "," + bottom + ")";

演示不起作用:http://jsfiddle.net/8pzaeo3w/16/

Answer 1

来自MDN documentation :

Gradients are defined as CSS <image> data types; they can be used only where an image data type is required. For this reason, linear-gradient won't work on background-color and other properties requesting <color>.

但是，您可以将其分配给 background 。另一个问题是你的top值(value)。您产生的值(value)是:

hsl(286100%,30%

我相信你能找出问题所在。

如果你解决了这两个问题，它就会起作用。我推荐给learn how to debug JavaScript这样您就可以自己检查变量。