JSON数据-如果值大于0％，则呈绿色

问题描述

如果高于0％，您将如何以'24hr-btcusdt'值为绿色呈现

脚本

async function getPriceBTCUSDT() {
     const response = await fetch("https://api.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT");
     const data = await response.json();
     const { prevClosePrice,priceChangePercent } = data;

     document.getElementById('price-btcusdt').textContent = prevClosePrice;
     document.getElementById('24hr-btcusdt').textContent = priceChangePercent;

     }

     getPriceBTCUSDT();

     setInterval(getPriceBTCUSDT,1000);

HTML

<div class="div-block-3">
   <div class="text-block-2"><span class="currency-title">USDT</span> <span class="currency-symbol">$</span><strong id="price-btcusdt" class="rates">11,794.00</strong></div>
<div id="24hr-btcusdt" class="_24hr-rolling">-1.84<span class="percent-symbol">%</span></div>
</div>

解决方法

我认为您只需在异步函数中添加这一行

 if(priceChangePercent>0){
  document.getElementById('24hr-btcusdt').style.color='green'
  }

async function getPriceBTCUSDT() {
     const response = await fetch("https://api.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT");
     const data = await response.json();
     const { prevClosePrice,priceChangePercent } = data;
  if(priceChangePercent>0){
  document.getElementById('24hr-btcusdt').style.color='green'
  }
     document.getElementById('price-btcusdt').textContent = prevClosePrice;
     document.getElementById('24hr-btcusdt').textContent = priceChangePercent;
     

     }

     getPriceBTCUSDT();

     setInterval(getPriceBTCUSDT,1000);

<div class="div-block-3">
   <div class="text-block-2"><span class="currency-title">USDT</span> <span class="currency-symbol">$</span><strong id="price-btcusdt" class="rates">11,794.00</strong></div>
<span id="24hr-btcusdt" class="_24hr-rolling">1.84</span>%
</div>