如何制作多种颜色的指示器

Question

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

这些技术有可能做到这一点吗？

或者是其他的方式？

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的背景图像。

您还可以使用SVG来更改rect元素的颜色。考虑使用d3.js来有效地使用SVG。