红了绿了什么的最有意思了
- 最近某厂股市大跌, 真的是绿的不行了, 于是出现了各种段子...
果然红了绿了什么的是永远的话题, 股市深似海O__O "…
- 与金融公司相关的web开发中, 展示涨跌率是常见的需求, 这些一般都有现成的解决方案, 比如百度提供的echarts
在线展示地址: 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>小结:
编程是艺术, 代码的简洁和易读往往不可兼得, 如果代码同时具备简洁和易读的特点, 代码就变得非常优雅了
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.10.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录