2017-07-17 48 views
0

我有一个非常简单的计算器,我试图设置。带HTML的基本API:创建对象

<!DOCTYPE html> 
<p>Crypto Currency Diversifier</p> 
<div class="container"> 
<h1>Crypto Currency Diversifier</h1> 

<form action="/action_page.php"> 
    Dollars:<br> 
    <input type="text" name="dollars" value="500"><br><br> 
    # of Currencies:<br> 
    <input type="text" name="quantity" value="20"><br><br> 
    <input type="submit" value="Submit"> 
</form> 

下一步是我需要拉前20名(数量)cryptocurrencies,然后除以相对于市值500之间(美元)。

这里的API网站:https://coinmarketcap.com/api/

点击https://api.coinmarketcap.com/v1/ticker/?limit=10显示我的排名前10位的货币。

如何在页面上添加每种货币的所有市场上限。然后从他们创造比率?

  • 数学部分是非常简单的,我没有得到的是如何从API链接实际拉动数据并获得可行的格式。
+0

查找查询和Ajax。花点时间阅读:https://stackoverflow.com/help/mcve –

回答

0

查找的Jquery和Ajax:

您可以像这样实现的:

function getCurrencies() 
 

 
{ 
 
    $.ajax(
 
    {url:"https://api.coinmarketcap.com/v1/ticker/?limit=20", 
 
    success:function(data) { 
 
       //console.log(data); 
 
       var totalcap=0.0; 
 
       var u=$("<ul>"); 
 
       for(var i=0;i<data.length;i++) { 
 
        var currency=data[i]; 
 
        var cap=parseFloat(currency["market_cap_usd"]); 
 
        var li=$("<li />").html(currency["name"] + " " + cap.toFixed(2).replace(/./g, function(c, i, a) { 
 
    return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c; 
 
})); 
 
     
 
        u.append(li); 
 
        totalcap+=cap; 
 
       } 
 
       $('#currlist').html('').append(u); 
 
       $('#cap').html(totalcap.toFixed(2).replace(/./g, function(c, i, a) { 
 
    return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c; 
 
})); 
 
       $('#data').val(JSON.stringify(data)); 
 
      }, 
 
      error:function() { 
 
       alert("Error"); 
 
      }, 
 
      dataType:"json", 
 
      type:"get"} 
 
    
 
); 
 

 
}
textarea {width:600px;height:250px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<p>Crypto Currency Diversifier</p> 
 
<div class="container"> 
 
<h1>Crypto Currency Diversifier</h1> 
 

 
<form action="/action_page.php"> 
 
    Dollars:<br> 
 
    <input type="text" name="dollars" value="500"><br><br> 
 
    # of Currencies:<br> 
 
    <input type="text" name="quantity" value="20"><br><br> 
 
    <input type="submit" value="Submit" onclick="getCurrencies(); return false" 
 
> 
 
    Total Market Cap:<div id="cap"></div><br /> 
 
    Currencies: <div id="currlist"></div><br /> 
 
    <textarea id="data"></textarea> 
 
</form>