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>

您也可以更改图像的src属性或div的背景图像，而不是更改div的背景颜色。

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

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

2 个答案: