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

【问题标题】：How to make indicator with several colors如何制作多种颜色的指示器
【发布时间】：2012-09-17 22:20:09
【问题描述】：

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

这些技术可以做到吗？

或者其他方式？

【问题讨论】：

标签： javascript jquery html extjs gif

【解决方案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');

【讨论】：

【解决方案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 来更改矩形元素的颜色。考虑使用 d3.js 来有效地使用 SVG。

【讨论】：