使用JavaScript实现多货币价格动态转换教程-html教程-PHP中文网

使用javascript实现多货币价格动态转换教程

本教程详细讲解如何利用JavaScript和外部API，为网页上的多个价格实现动态货币转换功能。我们将解决常见的转换错误，例如重复转换导致数值不准确，以及如何确保所有显示的价格都能同步更新，从而提供一个健壮且用户友好的货币转换解决方案。

在现代Web应用中，动态显示和转换货币价格是一项常见需求。本教程将引导您通过JavaScript实现一个功能完善的货币转换器，该转换器能够从外部API获取实时汇率，并将其应用于网页上多个商品的价格显示。我们将特别关注如何避免常见的逻辑错误，例如在多次转换中保持价格的准确性，以及如何同时更新所有相关的DOM元素。

1. 准备HTML结构

首先，我们需要一个简单的HTML结构来展示价格和货币选择器。这里，我们使用一个下拉菜单来选择货币，并用多个

标签来显示不同的价格。

<select name="coin" id="coin">
  <option value="default" default>Select coin</option>
  <option value="eur">EUR</option>
  <option value="usd">USD</option>
  <option value="gbp">GBP</option>
</select>

<h1 class='priceCoin'>2</h1>
<h1 class='priceCoin'>25</h1>
<h1 class='priceCoin'>60</h1>

登录后复制

要点：

立即学习“Java免费学习笔记（深入）”；

select 元素拥有 id="coin"，方便JavaScript获取。
option 元素设置了 value 属性，这些值将用于匹配汇率。
h1 元素都带有 class="priceCoin"，这样我们可以一次性选择所有价格显示区域。
option value="default" 是一个好的实践，用于处理用户未选择任何特定货币的初始状态。

2. 获取实时汇率数据

我们将使用一个公共的货币API来获取汇率。本例中，我们从 https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json 获取以欧元（EUR）为基准的汇率数据。

// 定义一个函数来获取货币数据
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json()) // 将响应解析为JSON格式
    .then(data => {
      crearMoneda(data); // 数据获取成功后调用处理函数
    })
    .catch(error => console.error('Error fetching currency data:', error)); // 错误处理
}

// 页面加载时立即获取货币数据
getCurrency();

登录后复制

解释：

fetch() 函数用于发起网络请求。
.then(res => res.json()) 处理HTTP响应，将其转换为JavaScript对象。
.then(data => crearMoneda(data)) 在数据成功解析后，将数据传递给 crearMoneda 函数进行后续处理。
.catch(error => ...) 是一个重要的错误处理机制，用于捕获网络请求或JSON解析过程中可能发生的错误。

3. 实现货币转换逻辑

这是核心部分，我们将在这里处理DOM元素的选取、原始价格的保存以及基于用户选择进行价格转换。

function crearMoneda(moneda) {
  // 从API响应中提取关键汇率
  const eurRate = moneda.eur.eur; // 欧元对欧元的汇率（通常为1）
  const usdRate = moneda.eur.usd; // 欧元对美元的汇率
  const gbpRate = moneda.eur.gbp; // 欧元对英镑的汇率

  // 获取HTML中的下拉菜单和所有价格显示元素
  const selectCoin = document.getElementById('coin');
  // 使用 querySelectorAll 获取所有具有 'priceCoin' 类的元素，返回一个 NodeList
  const priceCoinsArr = document.querySelectorAll('.priceCoin');

  // **关键点：存储原始价格**
  // 避免在多次转换中基于已转换的价格进行计算，导致数值错误。
  // 这些值应与HTML中h1标签的初始值对应
  const initalVals = [2, 25, 60];

  // 创建一个汇率映射对象，方便通过货币代码访问汇率
  const exchangeValues = {
    "default": 1, // 默认选项，不进行转换或视为1:1
    'eur': eurRate,
    'usd': usdRate,
    "gbp": gbpRate
  };

  // 监听下拉菜单的 'change' 事件
  selectCoin.addEventListener('change', (event) => {
    let coinSelected = event.target.value; // 获取用户选择的货币代码

    // 遍历原始价格数组，并更新每个显示元素
    initalVals.forEach((value, index) => {
      // 获取对应的汇率
      const rate = exchangeValues[coinSelected];
      // 计算转换后的价格
      const result = value * rate;
      // 将结果更新到对应的价格显示元素中
      // 注意：这里使用 toFixed(2) 可以确保结果保留两位小数，更符合货币显示习惯
      priceCoinsArr[index].innerHTML = result.toFixed(2);
    });
  });
}

登录后复制

代码解析与关键改进：

CodeGeeX

智谱AI发布的AI编程辅助工具插件，可以实现自动代码生成、代码翻译、自动编写注释以及智能问答等功能

170

查看详情

document.querySelectorAll('.priceCoin')：
- 原问题中使用了 document.querySelector('.priceCoin')，这只会返回第一个匹配的元素。为了更新所有价格，必须使用 querySelectorAll，它会返回一个 NodeList（类似数组），包含所有匹配的元素。
const initalVals = [2, 25, 60];：
- 这是解决原问题中“当再次更改时，当前货币变为1而不是2”的关键。每次进行货币转换时，都应该基于商品最初的原始价格进行计算，而不是基于上一次转换后的结果。通过将原始价格存储在一个数组中，我们确保了每次转换的基准都是正确的。
const exchangeValues = {...};：
- 将汇率组织成一个对象，使得通过 coinSelected 字符串可以直接访问对应的汇率，代码更加简洁和可读。"default": 1 确保了当选择“Select coin”时，价格保持不变。
initalVals.forEach((value, index) => ...)：
- 使用 forEach 循环遍历 initalVals 数组。对于每个原始价格 value 及其在数组中的 index，我们执行以下操作：
  - 从 exchangeValues 对象中获取当前选定货币的汇率。
  - 将原始价格乘以汇率，得到转换后的结果。
  - 使用 priceCoinsArr[index].innerHTML = result; 将转换后的价格更新到对应的
    元素中。index 确保了原始价格与对应的DOM元素匹配。
- toFixed(2) 是一个实用的方法，用于将数字格式化为指定小数位数，这对于货币显示非常重要。

4. 完整代码示例

将上述JavaScript和HTML结合起来，您将得到一个功能完整的动态货币转换器。

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态货币转换器</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h1 { margin: 10px 0; }
        select { padding: 8px; margin-bottom: 20px; }
    </style>
</head>
<body>

    <label for="coin">选择货币:</label>
    <select name="coin" id="coin">
        <option value="default" default>Select coin</option>
        <option value="eur">EUR</option>
        <option value="usd">USD</option>
        <option value="gbp">GBP</option>
    </select>

    <h1>商品A价格: <span class='priceCoin'>2</span></h1>
    <h1>商品B价格: <span class='priceCoin'>25</span></h1>
    <h1>商品C价格: <span class='priceCoin'>60</span></h1>

    <script src="script.js"></script>
</body>
</html>

登录后复制

JavaScript (script.js):

// 定义一个函数来获取货币数据
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json()) // 将响应解析为JSON格式
    .then(data => {
      crearMoneda(data); // 数据获取成功后调用处理函数
    })
    .catch(error => console.error('Error fetching currency data:', error)); // 错误处理
}

// 页面加载时立即获取货币数据
getCurrency();


function crearMoneda(moneda) {
  // 从API响应中提取关键汇率
  // 确保路径正确，例如 moneda.eur.usd 是因为API返回的结构是 { "eur": { "usd": ... } }
  const eurRate = moneda.eur.eur;
  const usdRate = moneda.eur.usd;
  const gbpRate = moneda.eur.gbp;

  // 获取HTML中的下拉菜单和所有价格显示元素
  const selectCoin = document.getElementById('coin');
  const priceCoinsArr = document.querySelectorAll('.priceCoin');

  // 存储原始价格。这些值应与HTML中span标签的初始值对应。
  // 如果价格可能包含小数，请确保它们是浮点数。
  const initalVals = [2, 25, 60]; 

  // 创建一个汇率映射对象，方便通过货币代码访问汇率
  const exchangeValues = {
    "default": 1, // 默认选项，不进行转换或视为1:1
    'eur': eurRate,
    'usd': usdRate,
    "gbp": gbpRate
  };

  // 监听下拉菜单的 'change' 事件
  selectCoin.addEventListener('change', (event) => {
    let coinSelected = event.target.value; // 获取用户选择的货币代码

    // 遍历原始价格数组，并更新每个显示元素
    initalVals.forEach((value, index) => {
      // 获取对应的汇率
      const rate = exchangeValues[coinSelected];
      // 计算转换后的价格
      const result = value * rate;
      // 将结果更新到对应的价格显示元素中，并保留两位小数
      priceCoinsArr[index].innerHTML = result.toFixed(2);
    });
  });
}

登录后复制

总结与注意事项

通过本教程，您应该已经掌握了如何使用JavaScript实现一个健壮的动态货币转换器。以下是一些关键的总结和最佳实践：

DOM元素选择： 当需要操作多个具有相同类的元素时，务必使用 document.querySelectorAll() 而非 document.querySelector()。前者返回一个 NodeList，后者只返回第一个匹配的元素。
保存原始数据： 进行多次转换时，始终基于原始数据进行计算，而不是基于上一次转换的结果。这是避免累积误差和逻辑错误的关键。
数据结构优化： 将汇率等相关数据组织成对象（如 exchangeValues），可以提高代码的可读性和维护性，通过键值对快速访问所需数据。
遍历更新： 对于多个需要更新的元素，使用 forEach 或 for 循环遍历并逐一更新是高效且推荐的做法。
默认选项处理： 在下拉菜单中设置一个默认选项（如 "Select coin"），并为其指定一个值（如 "default"），以便在用户未选择具体货币时提供一个基础状态或提示。
数据类型： 货币通常涉及小数，因此在处理价格时应确保使用浮点数（parseFloat），并且在显示时使用 toFixed() 来格式化输出，以避免精度问题和不美观的显示。
错误处理： 在 fetch 请求中添加 .catch() 可以捕获网络或API请求失败的情况，提高程序的健壮性。
用户体验： 考虑在汇率加载期间显示加载指示器，并在转换完成后提供视觉反馈。