javascript - 仅在一个部分上渐变

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 的 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;
}

JavaScript

然后编辑 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"];