紅了綠了什麼的最有意思了

JavaScript · 發表 2018-10-13 19:26:52

摘要：最近某廠股市大跌, 真的是綠的不行了, 於是出現了各種段子... 果然紅了綠了什麼的是永遠的話題, 股市深似海O__O "… 與金融公司相關的web開發中, 展示漲跌率是常見的需求, 這些一般都有...

最近某廠股市大跌, 真的是綠的不行了, 於是出現了各種段子...

果然紅了綠了什麼的是永遠的話題, 股市深似海O__O "…

與金融公司相關的web開發中, 展示漲跌率是常見的需求, 這些一般都有現成的解決方案, 比如百度提供的echarts

線上展示地址: ofollow,noindex">http://echarts.baidu.com/examples/editor.html?c=area-simple

然而像是在表格中, 用 紅色標識正值, 用綠色標識負值 這種小的需求, 反而需要我花一些時間, 如果你要使用原生js,還要考慮瀏覽器相容性, 程式碼夠不夠簡潔什麼的, 博主今天稍微研究了下這個問題, 也整理出了相對簡潔易讀的程式碼, 分享一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>紅了綠了什麼的,最有意思了~</title>
</head>
<body>
<div style="font-size: 20px; margin-bottom: 50px">紅了綠了什麼的,最有意思了~</div>
<table>
<tr>
<td style="width:100px;">日期</td>
<td style="width: 100px">漲跌幅</td>
</tr>
<tr>
<td>10月8日</td>
<td class="red-or-green">-10%</td>
</tr>
<tr>
<td>10月9日</td>
<td class="red-or-green">-5%</td>
</tr>
<tr>
<td>10月10日</td>
<td class="red-or-green">6%</td>
</tr>
<tr>
<td>10月11日</td>
<td class="red-or-green">-8%</td>
</tr>
<tr>
<td>10月12日</td>
<td class="red-or-green">1%</td>
</tr>
<tr>
<td>10月13日</td>
<td class="red-or-green">-4%</td>
</tr>
<tr>
<td>10月14日</td>
<td class="red-or-green">5%</td>
</tr>
</table>

<script>
// 通過class選擇元素的相容性寫法
function getClass(classname){
if (document.getElementsByClassName) {
//使用現有方法
return document.getElementsByClassName(classname);
} else {
//定義一個數組放classname
var results = new Array();
//獲取所有節點元素
var elem = document.getElementsByTagName("*");
for (var i = 0; i < elem.length; i++) {
if (elem[i].className.indexOf(classname) != -1) {
results[results.length] = elem[i];
}
}
return results;
}
}
// 獲取所有元素
var all_red_or_green_eles = getClass("red-or-green");
// 優雅的迴圈
var i = all_red_or_green_eles.length;
while (i--) {
if(all_red_or_green_eles[i].innerText.indexOf('-') === 0){
all_red_or_green_eles[i].style.color = "green";
}else{
all_red_or_green_eles[i].style.color = "red";
}
}

</script>
</body>
</html>

小結:

程式設計是藝術, 程式碼的簡潔和易讀往往不可兼得, 如果程式碼同時具備簡潔和易讀的特點, 程式碼就變得非常優雅了

紅了綠了什麼的最有意思了

小結:

您可能也會喜歡…