javascript - 动画健康栏的颜色变化

Question

我正在制作健康栏，我希望使用 <meter> .我有它的工作，除了它不会随着它的减少而改变颜色。我想我可以用 if 来解决这个问题树，但我不知道如何在达到特定宽度时更改条的颜色。有任何想法吗？谢谢!!

fiddle : http://jsfiddle.net/Thaikhan/d018xzbj/13/

HTML:

<meter id="your_meter" min="0" low="30" optimum="100" high="50" max="100" value="80">   </meter>
<input type="submit" id="byBtn" value="Change" onclick="change()"/>

JavaScript:

function change(){
setTimeout(function () {
    var start = $('#your_meter').attr('value');
    var end = 55;
    if (start > 50) {
        //STARTING FROM GREEN
        if (end < 50) {
            //CONTINUE PAST GREEN
            var css = document.createElement("style");
            css.type = "text/css";
            css.innerHTML = "#your_meter::-webkit-meter-optimum-value { transition: width 3s; width: 50% !important; }";
            document.body.appendChild(css);
            //CHANGE COLOR AND CONTINUE TO DECREASE///??????????????????
                if (end < 30) {
                    //CONTINUE PAST YELLOW
                }
                else {
                //STOP BEFORE YELLOW ENDS
                setTimeout(function() {
                    var css2 = document.createElement("style");
                    css2.type = "text/css";
                    css2.innerHTML = "#your_meter::-webkit-meter-optimum-value { transition: width 3s; width: "+end+"% !important; }";
                    document.body.appendChild(css2);   
                }, 3000);
            }
        }
        else {
            //STOP BEFORE GREEN ENDS
            var css = document.createElement("style");
            css.type = "text/css";
            css.innerHTML = "#your_meter::-webkit-meter-optimum-value { transition: width 3s; width: "+end+"% !important; }";
            document.body.appendChild(css);
        }
    }...

Answer 1

原因是因为当您通过 CSS 更新电表最佳值时，您并没有更新电表实际使用的值。

您需要在更新 CSS 值的同时动态更新计量器的值。你可以这样做:

document.getElementById("your_meter").value = "30";

所以，做你想做的事情看起来像这样:

function change(){
    var end = 35;
    var meter = document.getElementById("your_meter");
    var current = meter.value;

    function render(){
        console.log(meter.value);

        if(current <= end){
            window.cancelAnimationFrame(render);
            return;
        }

        meter.value = current - 1;

        current = meter.value;

        window.requestAnimationFrame(render);
    }

    window.requestAnimationFrame(render);
    render();
}

基于动态时间:

function change(){
    var end = 35;
    var meter = document.getElementById("your_meter");
    var current = meter.value;
    var interval;
    var speed = 30;

    function render(){
        console.log(meter.value);

        if(current <= end){
            clearInterval(interval);
            return;
        }

        meter.value = current - 1;

        current = meter.value;

        window.requestAnimationFrame(render);
    }

    interval = setInterval(render, speed);
}