微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何创建BTC到USD的计算器,反之亦然?

如何解决如何创建BTC到USD的计算器,反之亦然?

BTC到USD的转换效果很好!但我也想从右input到左input向BTC转换添加美元。 USD input兑BTC input的价值。 BTC input的价值等于USD input的价值。 是否可以添加这些拖车转换并一起工作?感谢您阅读我的问题,感谢您的努力。

$("input[name='calc']").keyup(function(){
 $.getJSON( "https://api.coindesk.com/v1/bpi/currentprice/usd.json",function( data) {
    var amountInBtc = parseFloat($("input[name='calc']").val());
    //convert btc to usd
    var exchangeRate = parseInt(data.bpi.USD.rate_float);
    var amount = amountInBtc * exchangeRate;
    $("input[name='rslt']").val(amount);
    });
});
.calculator{
  display:flex;
  margin-top: 50px;
  justify-content: center;
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>




<!--------- Calculator----------------->
    <div class="calculator">
      <input type="number" name="calc" placeholder="BTC">
      <div class="arrow" style="margin: 0 10px";>=</div>
      <input type="number" name="rslt" placeholder="USD">
    </div>

解决方法

请参见下文...简单的方法是对两个字段都使用一个类,并在该类上调用onChange函数,并对字段名称使用变量,而不是在函数中对其进行硬编码。还要注意,使用toFixed(2)可以修复2个小数点,如果小于0.01,则为0.00。
其他一切都是自我解释

$(".currencyField").keyup(function(){ //input[name='calc']
 let convFrom;
 if($(this).prop("name") == "btc") {
       convFrom = "btc";
       convTo = "usd";
 }
 else {
       convFrom = "usd";
       convTo = "btc";
 }
 $.getJSON( "https://api.coindesk.com/v1/bpi/currentprice/usd.json",function( data) {
    var origAmount = parseFloat($("input[name='" + convFrom + "']").val());        
    var exchangeRate = parseInt(data.bpi.USD.rate_float);
    let amount;
    if(convFrom == "btc")
       amount = parseFloat(origAmount * exchangeRate);
    else
       amount = parseFloat(origAmount/ exchangeRate); 
    $("input[name='" + convTo + "']").val(amount.toFixed(2));
    });
});
.calculator{
  display:flex;
  margin-top: 50px;
  justify-content: center;
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>




<!--------- Calculator----------------->
    <div class="calculator">
      <input type="number" name="btc" class="currencyField" placeholder="BTC">
      <div class="arrow" style="margin: 0 10px";>=</div>
      <input type="number" name="usd" class="currencyField" placeholder="USD">
    </div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。