在特定秒内更新的比特币价格

问题描述

我已经搜索了一段时间，没有运气，我有html / javascript代码可以从bitcoininfo中检索并显示美元的比特币价格，但是我希望它使用Javascript每5秒自动更新一次。这样，无需刷新页面即可获取当前价格。我的代码是


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Bitcoin Current price</title>
  <style>#wrapper {
  font-size: 1em;
  font-family: arial;
  margin: 20px auto;
  width:450px;
  color: green;
  text-align: center;
}

#btc {font-size:6em;}

</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper">
  <h1>Bitcoin Current Price</h1>
  <div id="btc"></div>
</div>
<!-- partial -->
  <script> var currentPrice = new XMLHttpRequest();

currentPrice.open('GET','https://api.gdax.com/products/BTC-USD/book',true);
currentPrice.onreadystatechange = function(){
  if(currentPrice.readyState == 4){
    var ticker = JSON.parse(currentPrice.responseText);
    var price = ticker.bids[0][0];
    document.getElementById('btc').innerHTML = "$" + price;
  };
};
currentPrice.send();</script>

</body>
</html>

如果有更好的方法可以完成操作，那么朝正确方向的指针将不胜感激。

解决方法

将对API的调用包装到一个函数中，然后使用setInterval每5秒钟重复调用一次。

如果有更好的方法可以做到，则fetch API得到了广泛支持，并且具有更好的API

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bitcoin Current price</title>
  <style>
    #wrapper {
      font-size: 1em;
      font-family: arial;
      margin: 20px auto;
      width: 450px;
      color: green;
      text-align: center;
    }
    
    #btc {
      font-size: 6em;
    }
  </style>
</head>

<body>
  <!-- partial:index.partial.html -->
  <div id="wrapper">
    <h1>Bitcoin Current Price</h1>
    <div id="btc"></div>
  </div>
  <!-- partial -->
  <script>
    function get_price() {
      var el = document.getElementById('btc')
      fetch("https://api.gdax.com/products/BTC-USD/book")
        .then(res => res.json())
        .then(res => {
          var price = res.bids[0][0];
          el.innerHTML = "$" + price;
        }).catch(err => {
          el.innerHTML = "$0.00 - Error";
        });
    }

    get_price()

    setInterval(get_price,5000)
  </script>

</body>

</html>

您需要使用setInterval(function,milliseconds)函数。它将以指定的时间间隔（以毫秒为单位）调用函数或对表达式求值。

您的JavaScript代码将变为以下内容：

function getPrice() {
  var currentPrice = new XMLHttpRequest();
  currentPrice.open('GET','https://api.gdax.com/products/BTC-USD/book',true);
  currentPrice.onreadystatechange = function() {
    if(currentPrice.readyState == 4){
      var ticker = JSON.parse(currentPrice.responseText);
      var price = ticker.bids[0][0];
      document.getElementById('btc').innerHTML = "$" + price;
    };
  };
  currentPrice.send();
}
// To send a request for the first time the page loads
getPrice()
setInterval(getPrice,5000);

有关此功能的更多信息，请参考： https://www.w3schools.com/jsref/met_win_setinterval.asp

这里是样品

var interval = 3000; // Interval
var currentPrice = new XMLHttpRequest(); 
currentPrice.onreadystatechange = function() { 
  if(currentPrice.status == 200) {
    if ( currentPrice.responseText != '' ) {
      var ticker = JSON.parse(currentPrice.responseText);
      var price = ticker.bids[0][0];
      document.getElementById('btc').innerHTML = "$" + price;
      } 
    
  } 
  if ( currentPrice.readyState == 2 ) {  // check previous API call executed before call API again
      setTimeout(function() {
        getStockPrice();
    },interval);
  } 
};
function getStockPrice() {
  currentPrice.open('GET',true);
  currentPrice.send();
} 
getStockPrice();

#wrapper {
  font-size: 1em;
  font-family: arial;
  margin: 20px auto;
  width:450px;
  color: green;
  text-align: center;
}

#btc {font-size:6em;}

<div id="wrapper">
  <h1>Bitcoin Current Price</h1>
  <div id="btc"></div>
</div>

bitcoin html javascript price ticker

在特定秒内更新的比特币价格

问题描述

解决方法

相关问答