漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数

最新推荐文章于 2023-09-15 13:41:13 发布

漏刻有时

最新推荐文章于 2023-09-15 13:41:13 发布

阅读量465

点赞数

分类专栏：漏刻有时

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/113799273

版权

漏刻有时专栏收录该内容

287 篇文章 17 订阅

订阅专栏

这篇博客展示了如何使用CSS和JavaScript实现状态指示器的样式设计，包括不同状态的颜色表示和动态变化。通过`.stuNum`类设置不同状态的背景颜色，以及`.temp`类实现状态按钮的动画效果。示例中包含正常、过高和过低三种状态，并通过`getBgColor`函数根据随机生成的数值改变状态按钮的背景和对应文字说明。

摘要由CSDN通过智能技术生成

在这里插入图片描述

组状态显示

 .stuNum1 {
            display: inline-block;
            border-radius: 50%;
            background: #7CB854;
            margin: auto 5px;
            width: 1rem;
            height: 1rem;
            vertical-align: middle;
        }

        .stuNum2 {
            display: inline-block;
            border-radius: 50%;
            background: #DB2F2C;
            margin: auto 5px;
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }

        .stuNum3 {
            display: inline-block;
            border-radius: 50%;
            background: #3EC6F0;
            margin: auto 5px;
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }

<div class="status">
    <span id="cur">状态说明</span>
    <span class="stuNum1"></span><span id="normal">正常</span>
    <span class="stuNum2"></span><span id="heightNorm">过高</span>
    <span class="stuNum3"></span><span id="lowNorm">过低</span>
</div>

单个状态动画

        /*状态按钮*/
        .temp {
            display: inline-block;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            line-height: 15px;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
            margin: auto 5px;
        }

        /*过高*/
        .tempbg1 {
            background: #DB2F2C;
        }

        /*正常*/
        .tempbg2 {
            background: #438a7a;
        }

        /*过低*/
        .tempbg3 {
            background: #3EC6F0;
        }

<div class="status">
    <span class="temp" id="alert"></span><span id="normal">正常</span>
</div>

    var timerAll;
    getBgColor("#alert", "#normal", 3);
    clearInterval(timerAll);
    timerAll = setInterval(function () {
        var temp = randData(-5, 20);
        getBgColor("#alert", "#normal", temp);
    }, 300);


    //获取背景色;
    function getBgColor(id, status, num) {
        var min = '0', max = '15';
        if (num > max) {
            $(id).removeClass("tempbg2").removeClass("tempbg3").addClass("tempbg1");//tempbg1
            $(status).html("过高");
        }

        if (num >= min && num <= max) {
            $(id).removeClass("tempbg1").removeClass("tempbg3").addClass("tempbg2");//tempbg2
            $(status).html("正常");
        }

        if (num < min) {
            $(id).removeClass("tempbg1").removeClass("tempbg2").addClass("tempbg3");//tempbg3
            $(status).html("过低");
        }
    }

    //随机范围整数;
    function randData(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range);
        return num;
    }