JavaScript对比两个百分数大小

2023年12月5日 407次阅读 来源: 三杯水Plus

知识点

  • 获取标签font内容
  • 判断两个百分比大小
  • 修改标签font内容颜色
  • httml表格

代码样例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
td {text-align:center;}
tr {text-align:center;}
th {text-align:center;}
</style>
</head>
<body>
<script type="text/javascript"> 

$(document).ready(function(){

var sumrequest = document.getElementById('sumrequest').innerText;
var avgrequest = document.getElementById('avgrequest').innerText;

var errorcount = document.getElementById('errorcount').innerText;
var erroravg = document.getElementById('erroravg').innerText;

var longtime = document.getElementById('longtime').innerText;
var longtimeavg = document.getElementById('longtimeavg').innerText;




//强制转换为数值型
sumrequest = parseFloat(sumrequest);
avgrequest = parseFloat(avgrequest);

errorcount = parseFloat(errorcount);
erroravg = parseFloat(erroravg);

longtime = parseFloat(longtime);
longtimeavg = parseFloat(longtimeavg);


            
if (sumrequest < avgrequest) {
document.getElementById( "sumrequest" ).style.color = "red";
}

if (sumrequest >= avgrequest) {
document.getElementById( "sumrequest" ).style.color = "green";
}

if (longtime < longtimeavg) {
document.getElementById( "longtime" ).style.color = "green";
}

if (longtime >= longtimeavg) {
document.getElementById( "longtime" ).style.color = "red";
}

if (errorcount < erroravg) {
document.getElementById( "errorcount" ).style.color = "green";
}

if (errorcount >= erroravg) {
document.getElementById( "errorcount" ).style.color = "red";
}
});

</script> 
<table  width="100%" height="100%"  cellspacing="0" cellpadding="0">
<tr>
<th><font >请求次数</font></th>
<th><font >错误次数</font></th>
<th><font >超长请求</font></th>
</tr>

<tr>
<td> <font size="5" id="sumrequest"> $sumrequest </font> <font size ="5">(</font> <font size="5" id="avgrequest"> $avgrequest </font><font size ="5">)</font> </td>
<td> <font size="5" id="errorcount"> $errorcount </font> <font size ="5">(</font> <font size="5" id="erroravg"> $erroravg </font><font size ="5">)</font> </td>
<td> <font size="5" id="longtime"> $longtime </font> <font size ="5">(</font> <font size="5" id="longtimeavg"> $longtimeavg </font> <font size ="5">)</font> </td>
</tr>
</table>

</body>
</html>
    原文作者：三杯水Plus
    原文地址: https://www.jianshu.com/p/790d47648545
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞