只有一个部分的渐变

Question

在我之前的帖子中，我问过如何设置渐变。现在的问题是渐变“扩散”了。这是我正在使用的

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%"], 
["yellow","60%"],
["green","60%"],
["green","80%"]
];
yourElement.style.background = generateCSSGradient(cols); 

this。我想要做的是说你填写一个输入。酒吧达到33％，然后可能是红色。那么下一个将是蓝色，所以第四个。与this不同。有任何想法吗？我也避免使用div

Answer 1

我认为你想要this ...请参阅source code

HTML

我编辑了 HTML 代码，并在 div colors中添加了另一个名为top的 div 。 ..

<div class="top">
    <div class="colors"></div>
</div>

CSS

我还修改了.top的 CSS 并添加到overflow:hidden;并创建.colors样式

.top{
    /*background: #009dff;*/
    background:linear-gradient(to right,#009dff 0,#00c8ff 100%);
    position:fixed;
    z-index:1031;
    top:0;
    left:0;
    height:4px;
    transition:all 1s;
    width:0;
    overflow: hidden;
}

.colors{
    width: 100%;
    height: 4px;
}

JavsScript

然后编辑 JavaScript 并将 CSSGradient 设为colors而不是top，并让JavaScript设置宽度 colors以适应窗口宽度，并更改颜色百分比..

document.querySelector(".colors").style.background = generateCSSGradient(cols);

var window_width = window.innerWidth + "px";
document.querySelector(".colors").style.width = window_width;

var cols = [
    ["red","0%"],
    ["red","33.3%"],
    ["yellow","33.3%"],
    ["yellow","66.6%"],
    ["green","66.6%"],
    ["green","100%"]
];

希望这会对你有帮助......

---

更新

如果您想更改this栏的颜色，请参阅source code ...

只需将 JavaScript 编辑为

即可

function cback(e) {
    var t = [];
    for (var n = inputs.length; n--;) {
        if (!inputs[n].value.length) t.push(inputs[n]);
    }
    var r = t.length;
    var i = inputs.length;
    var s = document.querySelectorAll(".top");
    for (var o = s.length; o--;) {
        s[o].style.width = 100 - r / i * 100 + "%";
        s[o].style.background = cols[i-r-1];
    }
}
var forms = document.querySelectorAll(".form"),
    inputs = [];
for (var i = forms.length; i--;) {
    var els = forms[i].querySelectorAll("input, textarea, select");
    for (var j = els.length; j--;) {
        if (els[j].type != "button" && els[j].type != "submit") {
            inputs.push(els[j]);
            els[j].addEventListener("input", cback, false);
        }
    }
}

var cols = ["red","yellow","green"];