javascript - 带有颜色转换 jquery 的进度条？

Question

您好，我正在尝试创建一个进度条，在单击事件中它会按百分比减少(带有一个小动画)并将其颜色从绿色更改为红色。所以第一种颜色是 100% 绿色。如果我按一次，宽度应该是 99%，颜色会稍微偏红一点。这应该一直持续到内部进度条的宽度为 1% 并且颜色为 100% 红色。

这可能吗？或者我必须设置一些颜色变为另一种颜色的限制？我只会使用 jquery 和 jquery mobile。 (没有 jquery-ui)

到目前为止我有这个:

css:
#battery{
    height: 100%;
    margin-left: 2%;
    margin-top: 1%;
    border-color: black;
    border-style: solid;
}

#battery-inner{
    background:green;
    height: 100%;
    float: right;
    width: 100%;
}

js(包含在所需的 onclick() 函数中):

$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');

我希望颜色像这个例子一样(红色边，黄色中间，绿色另一边)

http://www.cssflow.com/snippets/animated-progress-bar/demo

到目前为止它可以工作，但它没有任何动画，也没有颜色变化......

Answer 1

FIDDLE

这使用 a small slider plugin I wrote在 jQuery 中，但应该让您很好地了解如何实现这一点。

诀窍是简单地计算出进度条的百分比值，然后将其应用于 RGB 颜色，对红色分量相反，对绿色分量递增。

HTML

<div id='slider' class='sliderBar'></div>
<button>Remove 10%</button>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#slider {
    height:20px;
    max-height:20px;
}
.sliderBar-progress {
    background:rgb(0, 255, 0);
}

jQuery

$('#slider').sliderBar({
    start: 100,
    onChange: function (val) {
        var red = 0,
            green = 0;
        if (val >= 50) {
            red = 255 - Math.round(((val - 50) / 50) * 255);
            green = 255;
        } else {
            red = 255;
            green = Math.round(((val) / 50) * 255);

        }
        $('.sliderBar-progress').css({
            background: "rgb(" + red + "," + green + ",0)"
        });
    }
});

$('button').on('click', function () {
    $('#slider').setsliderBar($('#slider').getsliderBar()-10, true);
});