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

<米>动画健康栏上的颜色变化</米>

1 个答案: