div中的X部分

Question

我看到了这个

如果我能用JS动态改变颜色的颜色和宽度，那就太酷了。问题是我可以使用div，但不喜欢。我已经尝试过渐变，但它似乎没有按预期工作。关于如何解决这个问题的任何想法？另外，我不是要求你为我编写代码，而是要求帮助。当我使用div方式并将其设置为33％时，只有33％的渐变显示。不是与颜色相对应的33％。

 .a{
  background-image:
linear-gradient(
  to right, 
  #fffdc2,
  #009dff 15%,
  #000 15%,
  #000 85%,
  #fffdc2 85%
);
position: fixed;
z-index: 1031;
top: 0;
height: 4px;
transition:all 1s;
}

Answer 1

渐变绝对是要走的路。使用百分比位置进行色标。

例如，尝试此功能：

function generateCSSGradient(colours) {
    var l = colours.length, i;
    for( i=0; i<l; i++) colours[i] = colours[i].join(" ");
    return "linear-gradient( to right, "+colours.join(", ")+")";
}

var cols = [
    ["red","0%"],
    ["red","40%"],
    ["yellow","40%"], // note same percentage - this gives a crisp change
    ["yellow","60%"],
    ["green","60%"],
    ["green","80%"],
    ["blue","80%"],
    ["blue","100%"]
];
yourElement.style.background = generateCSSGradient(cols);

您可以根据需要调整和改变颜色 - 添加更多颜色，移动它们，更改它们，任何事情都可以！