Currency-Converter.html

<!-- 模块开头：GitHub博客专用人民币实时汇率查询与转换工具 -->
<div style="width: 100%; max-width: 800px; margin: 25px auto; padding: 20px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0,0,0,0.06); background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <!-- 标题区域 -->
  <h3 style="margin: 0 0 20px; font-size: 18px; color: #333; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px;">
    实时汇率查询与转换
  </h3>

  <!-- 汇率显示区域 -->
  <div style="margin-bottom: 25px;">
    <h4 style="margin: 0 0 12px; font-size: 14px; color: #666;">当前汇率（1人民币可兑换）</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;">
      <!-- 美元汇率卡片 -->
      <div style="padding: 15px; border-radius: 8px; background: #f8f9fa; text-align: center;">
        <div style="font-size: 12px; color: #999; margin-bottom: 5px;">美元 (USD)</div>
        <div id="cny-to-usd" style="font-size: 20px; font-weight: 500; color: #333;">--</div>
        <div id="usd-to-cny" style="font-size: 12px; color: #666; margin-top: 3px;">1 USD ≈ -- CNY</div>
      </div>
      <!-- 日元汇率卡片 -->
      <div style="padding: 15px; border-radius: 8px; background: #f8f9fa; text-align: center;">
        <div style="font-size: 12px; color: #999; margin-bottom: 5px;">日元 (JPY)</div>
        <div id="cny-to-jpy" style="font-size: 20px; font-weight: 500; color: #333;">--</div>
        <div id="jpy-to-cny" style="font-size: 12px; color: #666; margin-top: 3px;">100 JPY ≈ -- CNY</div>
      </div>
      <!-- 港元汇率卡片 -->
      <div style="padding: 15px; border-radius: 8px; background: #f8f9fa; text-align: center;">
        <div style="font-size: 12px; color: #999; margin-bottom: 5px;">港元 (HKD)</div>
        <div id="cny-to-hkd" style="font-size: 20px; font-weight: 500; color: #333;">--</div>
        <div id="hkd-to-cny" style="font-size: 12px; color: #666; margin-top: 3px;">1 HKD ≈ -- CNY</div>
      </div>
    </div>
    <div id="rate-update-time" style="margin-top: 10px; font-size: 12px; color: #999; text-align: right;">
      汇率更新时间：--
    </div>
  </div>

  <!-- 汇率转换区域 -->
  <div>
    <h4 style="margin: 0 0 12px; font-size: 14px; color: #666;">货币转换</h4>
    <div style="display: flex; flex-wrap: wrap; gap: 15px; align-items: center;">
      <!-- 输入金额 -->
      <div style="flex: 1; min-width: 150px;">
        <label style="display: block; font-size: 12px; color: #666; margin-bottom: 5px;">输入金额</label>
        <input 
          id="convert-amount" 
          type="number" 
          min="0" 
          step="0.01" 
          value="1" 
          style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"
        >
      </div>
      <!-- 源货币选择 -->
      <div style="min-width: 120px;">
        <label style="display: block; font-size: 12px; color: #666; margin-bottom: 5px;">源货币</label>
        <select id="source-currency" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #fff;">
          <option value="CNY">人民币 (CNY)</option>
          <option value="USD">美元 (USD)</option>
          <option value="JPY">日元 (JPY)</option>
          <option value="HKD">港元 (HKD)</option>
        </select>
      </div>
      <!-- 目标货币选择 -->
      <div style="min-width: 120px;">
        <label style="display: block; font-size: 12px; color: #666; margin-bottom: 5px;">目标货币</label>
        <select id="target-currency" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: #fff;">
          <option value="USD">美元 (USD)</option>
          <option value="JPY">日元 (JPY)</option>
          <option value="HKD">港元 (HKD)</option>
          <option value="CNY">人民币 (CNY)</option>
        </select>
      </div>
      <!-- 转换按钮 -->
      <div style="min-width: 100px; align-self: flex-end; margin-bottom: 24px;">
        <button id="convert-btn" style="width: 100%; padding: 10px; background: #2c3e50; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s;">
          立即转换
        </button>
      </div>
    </div>
    <!-- 转换结果 -->
    <div id="convert-result" style="margin-top: 15px; padding: 15px; border-radius: 8px; background: #f8f9fa; text-align: center; font-size: 16px; color: #333; display: none;">
      <span id="result-content">1 CNY ≈ 0.14 USD</span>
    </div>
  </div>
</div>

<script>
  // 存储汇率数据（CNY为基础，1 CNY = ? 其他货币）
  let exchangeRates = {};
  // 公开汇率API（无需密钥，适合前端调用）
  const RATE_API_URL = "https://open.er-api.com/v6/latest/CNY";

  // 1. 获取并更新实时汇率
  async function fetchAndUpdateRates() {
    const usdDom = document.getElementById("cny-to-usd");
    const jpyDom = document.getElementById("cny-to-jpy");
    const hkdDom = document.getElementById("cny-to-hkd");
    const usdReverseDom = document.getElementById("usd-to-cny");
    const jpyReverseDom = document.getElementById("jpy-to-cny");
    const hkdReverseDom = document.getElementById("hkd-to-cny");
    const timeDom = document.getElementById("rate-update-time");

    try {
      const response = await fetch(RATE_API_URL);
      const data = await response.json();
      
      if (data.result === "success") {
        // 存储汇率（保留4位小数）
        exchangeRates = {
          USD: parseFloat(data.rates.USD.toFixed(4)),
          JPY: parseFloat(data.rates.JPY.toFixed(4)),
          HKD: parseFloat(data.rates.HKD.toFixed(4)),
          CNY: 1 // 1 CNY = 1 CNY
        };

        // 更新汇率显示（1 CNY 可兑换的其他货币）
        usdDom.textContent = exchangeRates.USD;
        jpyDom.textContent = exchangeRates.JPY;
        hkdDom.textContent = exchangeRates.HKD;

        // 更新反向汇率（1其他货币 可兑换的CNY，保留4位小数）
        usdReverseDom.textContent = `1 USD ≈ ${(1 / exchangeRates.USD).toFixed(4)} CNY`;
        jpyReverseDom.textContent = `100 JPY ≈ ${(100 / exchangeRates.JPY).toFixed(4)} CNY`;
        hkdReverseDom.textContent = `1 HKD ≈ ${(1 / exchangeRates.HKD).toFixed(4)} CNY`;

        // 更新时间（格式：YYYY-MM-DD HH:MM）
        const updateTime = new Date(data.time_last_update_unix * 1000);
        const formattedTime = `${updateTime.getFullYear()}-${(updateTime.getMonth() + 1).toString().padStart(2, "0")}-${updateTime.getDate().toString().padStart(2, "0")} ${updateTime.getHours().toString().padStart(2, "0")}:${updateTime.getMinutes().toString().padStart(2, "0")}`;
        timeDom.textContent = `汇率更新时间：${formattedTime}`;
      } else {
        throw new Error("获取汇率失败，API返回错误");
      }
    } catch (err) {
      console.error("汇率获取错误：", err);
      usdDom.textContent = "获取失败";
      jpyDom.textContent = "获取失败";
      hkdDom.textContent = "获取失败";
      timeDom.textContent = "汇率更新时间：获取失败";
    }
  }

  // 2. 执行货币转换
  function handleCurrencyConvert() {
    const amountInput = document.getElementById("convert-amount");
    const sourceCurrency = document.getElementById("source-currency").value;
    const targetCurrency = document.getElementById("target-currency").value;
    const resultDom = document.getElementById("convert-result");
    const resultContentDom = document.getElementById("result-content");

    // 输入校验
    const amount = parseFloat(amountInput.value);
    if (isNaN(amount) || amount < 0) {
      alert("请输入有效的非负金额");
      return;
    }
    if (!exchangeRates[sourceCurrency] || !exchangeRates[targetCurrency]) {
      alert("汇率数据未加载完成，请稍后再试");
      return;
    }

    // 计算转换结果（保留4位小数）
    // 逻辑：金额 * (1 CNY兑目标货币汇率) / (1 CNY兑源货币汇率)
    const convertedAmount = (amount * exchangeRates[targetCurrency] / exchangeRates[sourceCurrency]).toFixed(4);
    // 显示结果
    resultContentDom.textContent = `${amount} ${sourceCurrency} ≈ ${convertedAmount} ${targetCurrency}`;
    resultDom.style.display = "block";
  }

  // 3. 初始化与事件绑定
  window.addEventListener("DOMContentLoaded", () => {
    // 初始加载汇率
    fetchAndUpdateRates();
    // 每30分钟刷新一次汇率（避免频繁请求API）
    setInterval(fetchAndUpdateRates, 30 * 60 * 1000);

    // 绑定转换按钮点击事件
    document.getElementById("convert-btn").addEventListener("click", handleCurrencyConvert);
    // 绑定回车键触发转换
    document.getElementById("convert-amount").addEventListener("keydown", (e) => {
      if (e.key === "Enter") handleCurrencyConvert();
    });
  });
</script>
<!-- 模块结尾：GitHub博客专用人民币实时汇率查询与转换工具 -->