如何结合Codepen单位转换器与Coingecko API实现加密货币换算工具

核心实现逻辑非常简单：你已经完成了固定价格下的换算功能，仅需将Coingecko API返回的实时币价，动态替换你修改的加密货币单位映射中的固定系数即可，原有换算逻辑无需任何改动。

1 调整单位映射与配置 #

首先将你修改过的长度单位映射独立为加密货币专用配置，清理无用单位：

// 加密货币单位映射，规则和你之前修改的保持一致：meters对应USD、kilometers对应ETH、centimeters对应BTC
var crypto = {
  meters: 1, // USD基准值
  kilometers: 4178, // ETH初始值，后续API返回实时价格覆盖
  centimeters: 60320, // BTC初始值
  // 可按需添加更多币种对应原有其他长度单位
}
// 保持indexArr原有结构，将第一个元素替换为crypto
var indexArr = [crypto, mass, speed, temperature, time];

// 同步修改unitOptions第一个数组的显示名称，可选，也可以保留原有长度单位名自己知道对应关系就行
unitOptions = [["美元(USD)", "以太坊(ETH)", "比特币(BTC)"], ["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"]]

2 整合Coingecko API实时更新币价 #

将你的API请求代码改造为实时更新crypto映射的函数，可按需设置定时刷新保证价格时效性：

// 更新实时币价函数
function refreshCryptoPrice() {
  fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd")
    .then(res => res.json())
    .then(data => {
      // 直接替换映射中的固定值，和你之前的单位对应关系保持一致
      crypto.kilometers = data.ethereum.usd;
      crypto.centimeters = data.bitcoin.usd;
      
      // 同步更新你的币价展示区域
      document.querySelector("#bitcoin").innerText = crypto.centimeters;
      // 如果你加了ETH展示也可以同步赋值
      
      // 价格更新后自动刷新当前输入的换算结果，优化用户体验
      const inputVal = document.getElementById("value1").value;
      if(inputVal && !isNaN(parseFloat(inputVal))) {
        $("#value1").trigger("keyup");
      }
    })
    .catch(err => {
      console.log("币价获取失败，将使用上次缓存的价格换算", err);
    })
}

// 页面加载时立即拉取一次币价
refreshCryptoPrice();
// 每30秒刷新一次币价，可根据需求调整间隔时间
setInterval(refreshCryptoPrice, 30 * 1000);

3 可选优化 #

如果不需要其他单位换算功能，可以直接删除HTML中unitType下拉框里的长度之外的其他选项，界面更简洁，无需改动JS逻辑。

内容的提问来源于stack exchange，提问作者Onur