& lt; meter>动画生命条颜色改变

<meter> Color Change on Animation Health Bar

本文关键字：改变 颜色 生命 lt meter 动画      更新时间：2023-09-26

我正在制作一个生命值条，我希望使用<meter>。我让它工作了，除了它的颜色不会随着它的减少而改变。我想我可以用if树来解决这个问题，但我不知道如何改变栏的颜色，当它达到特定的宽度。什么好主意吗?谢谢! !

小提琴: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);
        }
    }...

原因是因为当您通过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);
}
相关文章：