- Recently, the stock market of a factory has fallen sharply. It's really green, so there are all kinds of jokes
As expected, what's red and green is the eternal topic. The stock market is as deep as the sea
- In the web development related to financial companies, it is a common demand to show the up and down rate. These are generally ready-made solutions, such as echarts provided by Baidu
- However, in the table, it takes me some time to identify the positive value with red and the negative value with green. If you want to use native js, you need to consider browser compatibility, and the code is not simple enough. Today, the blogger has studied this problem a little, and sorted out the relatively simple and readable code. Share it
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Red, green or something,Most interesting~</title> </head> <body> <div style="font-size: 20px; margin-bottom: 50px">Red, green or something,Most interesting~</div> <table> <tr> <td style="width:100px;">date</td> <td style="width: 100px">Ups and downs</td> </tr> <tr> <td>10 8 June</td> <td class="red-or-green">-10%</td> </tr> <tr> <td>10 9 June</td> <td class="red-or-green">-5%</td> </tr> <tr> <td>10 10 June</td> <td class="red-or-green">6%</td> </tr> <tr> <td>10 11 June</td> <td class="red-or-green">-8%</td> </tr> <tr> <td>10 12 June</td> <td class="red-or-green">1%</td> </tr> <tr> <td>10 13 June</td> <td class="red-or-green">-4%</td> </tr> <tr> <td>10 14 June</td> <td class="red-or-green">5%</td> </tr> </table> <script> // Compatibility writing method of selecting elements by class function getClass(classname){ if (document.getElementsByClassName) { //Use existing methods return document.getElementsByClassName(classname); } else { //Define an array to put classname var results = new Array(); //Get all node elements 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; } } // Get all elements var all_red_or_green_eles = getClass("red-or-green"); // Elegant cycle 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>
Summary:
Programming is an art. The simplicity and readability of code are often not the same. If the code has the characteristics of simplicity and readability at the same time, the code becomes very elegant