组状态显示
.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!
