如何使用var和api制作轉換器-有解無憂

我想在加密貨幣之間做一個轉換器。我從 Codepen 找到了單位轉換器示例。轉換器作業正常。我的 coingecko api 作業正常。但是我不能把它們結合起來。我可以轉換硬幣價格，但我想將 AP? 用于當前硬幣價格。我在互聯網上搜索以在 js 'var' 中使用 API，但我不知道可能無法在輸入中使用 api。

這是轉換器：https : //codepen.io/devere-here/pen/OzbpKY

（我將價值更改為硬幣價格。（米：美元，公里：以太坊，厘米：位元幣）

這是轉換器JS

var length = {
  meters: 1,
  kilometers: 4178,
  centimeters: 60320,
  millimeters: 1000,
  micrometers: 1000000,
  nanometers: 1000000000,
  inches: 39.3701,
  feet: 3.28084,
  miles: 0.000621371
}
var mass = {
  grams: 1,
  kilograms: 0.001,
  milligrams: 1000,
  tons: 0.000001,
  pounds: 0.00220462,
  ounces: 0.035274
}
var time = {
  seconds: 1,
  milliseconds: 1000,
  microseconds: 1000000,
  nanoseconds: 1000000000,
  minutes: 0.0166667,
  hours: 0.000277778,
  days: 0.000011574,
  weeks: 0.0000016534,
  months: 0.00000038052,
  years: 0.00000003171 
}
var temperature = {
  celsius: 1,
  fahrenheit: 33.8,
  kelvin: 274.15
}
var speed = {
  metersPerSecond: 1,
  kilometersPerHour: 3.6,
  milesPerHour: 2.23694,
  knots: 1.94384
}

var indexArr = [length, mass, speed, temperature, time];

function converter(unitType, unit1, unit2, value){
  
  var finalValue;
    
  if(unitType == speed){
    
    unit1 = alterSpeedUnit(unit1);
    unit2 = alterSpeedUnit(unit2);
    
  }else{
    unit1 = unit1.toLowerCase();
    unit2 = unit2.toLowerCase();  
  }
     
  if(unitType == temperature){   
    finalValue = convertTemperature(value, unit1, unit2);   
  }else{
    finalValue = value*(1/unitType[unit1])*unitType[unit2];
  }
    
  return finalValue;
  
}

$("#value1").on("keyup", function(e){
  
  e.preventDefault();
  
  var convertedValue,
      value1 = document.getElementById("value1").value,
      unitIndex = document.getElementById("unitType").selectedIndex,
      unit1 = document.getElementById("select1").value,
      unit2 = document.getElementById("select2").value;
  
  value1 = parseFloat(value1);

  if(typeof value1 != "number"){
    throw "Please enter a number";
  }else{       
        
    convertedValue = converter(indexArr[unitIndex], unit1, unit2, value1);
    
    if(isNaN(convertedValue) == true){
      console.log("bloop");
      convertedValue = "";
    }
    
    document.getElementById("value2").value = convertedValue;
    
    
  }
  
})


$("#value2").on("keyup", function(e){
  
  e.preventDefault();
  
  var convertedValue,
      value2 = document.getElementById("value2").value,
      unitIndex = document.getElementById("unitType").selectedIndex,
      unit1 = document.getElementById("select1").value,
      unit2 = document.getElementById("select2").value;
  
  value2 = parseFloat(value2);

  if(typeof value2 != "number"){
    throw "Please enter a number";
  }else{       
    
    convertedValue = converter(indexArr[unitIndex], unit2, unit1, value2);
    
    if(isNaN(convertedValue) == true){
      console.log("bloop");
      convertedValue = "";
    }
    
    document.getElementById("value1").value = convertedValue;
    
  }
  
})

var index,
    newContent,
    newContent1,
    unitOptions,
    body;

$(".selectBox").on("input", function(e){
  
    e.preventDefault();
  
  var convertedValue,
      value1 = document.getElementById("value1").value,
      unitIndex = document.getElementById("unitType").selectedIndex,
      unit1 = document.getElementById("select1").value,
      unit2 = document.getElementById("select2").value;
  
  value1 = parseFloat(value1);

  if(typeof value1 != "number"){
    throw "Please enter a number";
  }else{       
        
    convertedValue = converter(indexArr[unitIndex], unit1, unit2, value1);

    if(isNaN(convertedValue) == true){
      console.log("bloop");
      convertedValue = "";
    }
    
    document.getElementById("value2").value = convertedValue;
    
    
  }
    

})


$("#unitType").on("input", function(){
    
  index = document.getElementById("unitType").selectedIndex;
  body = "";


  unitOptions = [["Meters", "Feet", "Miles", "Inches", "Kilometers", "Millimeters", "Micrometers", "Nanometers", "Centimeters"], ["Grams", "Kilograms", "Milligrams", "Tons", "Pounds", "Ounces"], ["Meters Per Second", "Miles Per Hour", "Kilometers Per Hour", "Knots"], ["Celsius", "Fahrenheit", "Kelvin"], ["Seconds", "Milliseconds", "Microseconds", "Nanoseconds", "Minutes", "Hours", "Days", "Weeks", "Months", "Years"]]


  $(".selectBox").attr("name", indexArr[index]);

  for(var i = 0; i < unitOptions[index].length; i  ){
    body  = '<option value='   unitOptions[index][i]   '>'   unitOptions[index][i]   '</option>';

  }
  
  $(".selectBox").empty().prepend(body);
   
});


function alterSpeedUnit(unit){
  
  
    switch(unit){
      case "Meters":
        unit = "metersPerSecond";
        break;
      case "Miles":
        unit = "milesPerHour";
        break;
      case "Kilometers":
        unit = "kilometersPerHour";
        break;
      case "Knots":
        unit = "knots";
        break;
    }
   
  return unit;

}


function convertTemperature(value, scale1, scale2){
    
  var temp;
  
  if(scale1 == scale2){
    temp = value;
  }else{
    if(scale1 != "celsius"){
      value = convertToCelsius(value, scale1);
    }
    
    if(scale2 == "celsius"){
      temp = value;
    }else if(scale2 == "fahrenheit"){
      temp = value*(9/5)   32;
    }else{
      temp = value   273.15;
    }
  }
  
  return temp;
  
}


function convertToCelsius(value, scale){
  
  var celsius;
  
  if(scale == "fahrenheit"){
    celsius = (value - 32)*(5/9);
  }else{
    celsius = value - 273.15;
  }
  
  return celsius;
  
}

<div id="container">
  
  <div id="titleContainer">
    <h1>Unit Converter</h1>
  </div>
  
  <div id="container2">
    
    <h2>What would you like to convert?</h2>
    
    <select name="units" id="unitType">
      <option value="length">Length</option>
      <option value="mass">Mass</option>
      <option value="speed">Speed</option>
      <option value="temperature">Temperature</option>
      <option value="time">Time</option>
    </select>
  </div>
  
  <div id="container3">
    
    <div id="container4">
      <div class="valueContainer">

        <input type="text" id="value1"></input>

        <div id="units1" class="unitSelect">

          <select name="length" id="select1" class="selectBox">
            <option value="meters">Meters</option>
            <option value="feet">Feet</option>
            <option value="miles">Miles</option>
            <option value="inches">Inches</option>
            <option value="kilometers">Kilometers</option>
            <option value="millimeters">Millimeters</option>
            <option value="micrometers">Micrometers</option>
            <option value="nanometers">Nanometers</option>
            <option value="centimeters">Centimeters</option>
          </select>

        </div>

      </div>
  
      <span class="valueContainer" id="equalSign">=</span>
  
      <div class="valueContainer">
    
        <input type="text" id="value2"></input>

        <div id="units2" class="unitSelect">

          <select name="length" id="select2" class="selectBox">
            <option value="meters">Meters</option>
            <option value="feet">Feet</option>
            <option value="miles">Miles</option>
            <option value="inches">Inch</option>
            <option value="kilometers">Kilometers</option>
            <option value="millimeters">Millimeters</option>
            <option value="micrometers">Micrometers</option>
            <option value="nanometers">Nanometers</option>
            <option value="centimeters">Centimeters</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

這是 Coingecko API

 const tacos = document.querySelector("#binance");
const shrimp = document.querySelector("#bitcoin");

fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,binancecoin&vs_currencies=usd")
  .then(res => res.json())
  .then(data => {
  const tacosPrice = data["binancecoin"]["usd"];
  const shrimpPrice = data["bitcoin"]["usd"];



  tacos.innerText = tacosPrice;
  shrimp.innerText = shrimpPrice;
})

這是我的硬幣價格 HTML

<div id="body">
  <div>
    1 Binance Coin = $<span id="binance"></span>
  </div>
  <div>
    1 Bitcoin = $<span  id="bitcoin"></span>
  </div>
</div>

uj5u.com熱心網友回復：

您需要重寫de轉換代碼，以幫助我制作基本代碼。

const currency = {
  save: (data) => {
    localStorage.setItem('currencies', JSON.stringify(data));
    console.log('loaded');
  },
  load: () => {
    $.get("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,binancecoin&vs_currencies=usd", currency.save);
  },
  get: () => {
    return JSON.parse(localStorage.getItem('currencies'));
  },
  convert: (dolar, crypt, coin) => {
    console.log(coin)
    const currencies = currency.get();
    if(currencies.hasOwnProperty(coin)) {
      const val = currencies[coin].usd;
      
      $('#crypt').val(dolar * val);
    }
  }
};

$(() => {
  currency.load();
  $('#test').click(() => {
    const dolar = $('#dolar').val();
    const crypt = $('#crypt').val();
    const coin = $('#coin').val();
    currency.convert(dolar, crypt, coin);
  });
});

https://codepen.io/naxsi-the-bashful/pen/OJjdzxq

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359958.html

標籤：javascript html

上一篇：反應中自定義表單處理程式的問題

下一篇：ReactuseContexthook：頁面重新加載時背景關系變為空