技術標籤：漏刻有時

組狀態顯示

 .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;
    }

Lockdatav Done!