更改石油价格股票代码的字体颜色(HTML和Javascript）

Change font colour on Oil Price ticker (HTML & Javascript)

本文关键字：颜色 HTML Javascript 字体 石油价格 代码      更新时间：2023-09-26

我知道这有点夸张，但我需要显示油价的变化（>0（绿色））（<0（红色））

它真的开始让我感到沮丧，因为我就是搞不懂代码。

以下是我目前拥有的：

<div id="stockPrice"><p><strong>TSX: 11.25</strong> (-0.07)</p>
<p><strong>NYSE: 10.67</strong> (0.00)</p>
<p><strong>Brent Crude: 111.11</strong> (-0.55)</p>
<p><strong>Natural Gas: 3.707</strong> (+0.008)</p></div>
<script>
function handleResponse (json) {
$("#stockPrice").empty();
for ( var i = 0; i < json.query.count; i++ ) {        
var xml = xmlDoc = $.parseXML(json.results[i]), $xml = $( xmlDoc ), $symbol= $xml.find("Symbol"), $price = $xml.find("PreviousClose"), $change = $xml.find("Change");  
            var name = $symbol.text();
            if($symbol.text() == "TLM.TO"){
                            name = "TSX";
            } else if($symbol.text()=="TLM"){
                            name = "NYSE";
            } else if($symbol.text()=="BZU13.NYM"){
                            name = "Brent Crude";
            } else if($symbol.text()=="NGN13.NYM"){
                            name = "Natural Gas";
            }
    stockPrice.innerHTML += "<p><strong>"+ name + ": " + $price.text() + "</strong>    ("+$change.text()+")</p>";
    }
}</script>

基本上，括号中的数字需要是红色，如果是负数，则为绿色。。。很容易，嗯？，而且我很直率。。。。，所以如果有人能帮助我，我将不胜感激。

将JS的最后一位更改为（故意冗长以清楚地说明这一点）

if (parseInt($change.text()) < 0) {
    stockPrice.innerHTML += '<p><strong>'+name+' : '+$price.text()+'</strong><span class="red">('+$change.text()+')</span></p>';
}
else if (parseInt($price.text()) > 0) {
    stockPrice.innerHTML += '<p><strong>'+name+' : '+$price.text()+'</strong><span class="green">('+$change.text()+')</span></p>';
}
else {
    stockPrice.innerHTML += '<p><strong>'+name+' : '+$price.text()+'</strong><span class="blue">('+$change.text()+')</span></p>';
}

CSS

.green { color: green; } // > 0
.red   { color: red  ; } // < 0
.blue  { color: blue ; } // zeroes

如果$change有效，那么只需执行一个：

var $colorClass = $change >= 0 ? "pos" : "neg";

然后位置：

stockPrice.innerHTML += '<p><strong>' + name + ': ' + $price.text() + '</strong> <span class="' + $colorClass + '">(' + $change.text() + ')</span></p>';

然后你可以添加css：

.neg {color:red;}
.pos {color:green;}
相关文章：