javascript - 如何制作具有多种颜色的指示器

Question

我想制作一个方形指示器，它会根据应用程序的某些状态改变它的颜色。我想要 4 种颜色，红色，绿色，蓝色，灰色。如何使用 Javascript/ExtJS/JQuery/HTML 或使用 gif 图像来实现这一点。

这些技术可以做到吗？

或者也许有其他方式？

Answer 1

这是一个非常非常基本和简单的任务。首先，您需要一个具有特定背景颜色的方形 DIV，可以通过编程方式更改

HTML

<div id="indicator"></div>

CSS

#indicator {
    position: relative; 
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #dddddd;
}

Javascript/jQuery

if(...some bad condition...)
    $('#indicator').css('background-color', 'red');

Answer 2

一个使用 JQuery 的小例子。假设 'state' 持有一个表示当前状态的数值：

<script type="text/javascript">
    $(document).ready(function() {
        // Select the div which will have the background color of the current state.
        var indicator = $('#state-div');
        switch(state) {
            case 0:
                indicator.css({'background-color': 'red'});
                break;
            case 1:
                indicator.css({'background-color': 'green'});
                break;
            // More cases for all the other states.
        }
    });
</script>

除了更改 div 的背景颜色，您还可以更改图像的 src 属性或 div 的背景图像。

You could also use SVG for changing the color of an rect element. Consider d3.js for effectively working with SVG.