动态货币转换：JavaScript实现多价格元素实时更新教程-html教程-PHP中文网

动态货币转换：JavaScript实现多价格元素实时更新教程

php中文网

发布： 2025-12-07 19:50:02

原创

394人浏览过

动态货币转换：JavaScript实现多价格元素实时更新教程

本教程详细介绍了如何使用javascript实现网页上多个价格元素的动态货币转换功能。文章将涵盖从api获取汇率、正确选择和管理dom元素、存储初始价格以避免累积转换错误，以及通过事件监听器实时更新显示价格的关键步骤，确保转换逻辑的准确性和可扩展性。

在现代Web应用中，动态显示商品价格并允许用户选择不同货币进行查看是一项常见需求。本文将深入探讨如何利用JavaScript实现这一功能，特别是针对页面上存在多个需要转换的价格元素的情况。我们将解决常见的实现问题，例如只更新第一个元素或因重复转换导致数值错误，并提供一个健壮的解决方案。

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>

登录后复制

这里，我们使用一个

2. 获取实时汇率数据

我们将使用外部API来获取最新的货币汇率。fetch API是实现这一目标的标准方式。

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

// 定义获取货币汇率的函数
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json()) // 将响应解析为JSON
    .then(data => {
      // 成功获取数据后，调用crearMoneda函数处理数据
      crearMoneda(data);
    })
    .catch(error => {
      console.error('获取汇率数据失败:', error);
      // 在实际应用中，这里可以添加用户友好的错误提示
    });
}

// 页面加载时调用，开始获取汇率
getCurrency();

登录后复制

这个getCurrency函数负责向指定的API端点发起请求，获取以欧元为基准的各种货币汇率。一旦数据成功获取，它会将其传递给crearMoneda函数进行进一步处理。

3. 实现货币转换逻辑

核心的货币转换逻辑将在crearMoneda函数中实现。我们需要解决两个关键问题：

更新所有价格元素： 避免只更新第一个匹配的元素。
基于原始值转换： 确保每次转换都基于原始价格，而不是上一次转换后的结果。

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

  // 获取货币选择下拉菜单元素
  const selectCoin = document.getElementById('coin');
  // 获取所有带有'priceCoin'类的H1元素（这是一个NodeList）
  const priceCoinsArr = document.querySelectorAll('.priceCoin');

  // 存储所有价格元素的初始数值。
  // 注意：这里是硬编码的初始值，在更复杂的应用中，这些值可能需要从DOM或数据源动态读取。
  const initalVals = [2, 25, 60];

  // 创建一个汇率映射对象，方便根据选择的货币值获取对应汇率
  const exchangeValues = {
    "default": 1, // 默认选项，通常不做转换或保持原值
    'eur': eurRate,
    'usd': usdRate,
    "gbp": gbpRate
  };

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

    // 遍历存储的初始值数组
    initalVals.forEach((value, index) => {
      // 获取当前选择货币对应的汇率
      const rate = exchangeValues[coinSelected];
      // 计算转换后的价格：原始值 * 汇率
      const convertedPrice = value * rate;
      // 将转换后的价格更新到对应的H1元素中
      // 使用toFixed(2)来格式化货币，保留两位小数，并确保是数字
      priceCoinsArr[index].innerHTML = convertedPrice.toFixed(2);
    });
  });
}

登录后复制

关键改进点：

标贝悦读AI配音

在线文字转语音软件-专业的配音网站

查看详情

document.querySelectorAll('.priceCoin'): 这个方法返回一个NodeList，包含了所有匹配priceCoin类的元素，而不是像querySelector那样只返回第一个。
initalVals数组: 我们创建了一个initalVals数组来存储所有价格的原始数值。每次用户改变货币选择时，我们都从这个原始数组开始计算，而不是在已经转换过的数值上再次转换，从而避免了累积错误。
exchangeValues对象: 将汇率存储在一个对象中，可以方便地通过货币代码（键）访问对应的汇率（值），使代码更清晰易读。
forEach循环: 遍历initalVals数组，对每个原始价格应用转换，并更新priceCoinsArr中对应索引的DOM元素。

4. 完整的代码示例

结合HTML和JavaScript，以下是完整的实现代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Currency Converter</title>
</head>
<body>

    <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>

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

登录后复制

app.js

// cambio de moneda
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json())
    .then(data => {
      crearMoneda(data);
    })
    .catch(error => {
      console.error('获取汇率数据失败:', error);
    });
}

getCurrency();

function crearMoneda(moneda) {
  const eurRate = moneda.eur.eur;
  const usdRate = moneda.eur.usd;
  const gbpRate = moneda.eur.gbp;

  const selectCoin = document.getElementById('coin');
  const priceCoinsArr = document.querySelectorAll('.priceCoin');

  // 硬编码的初始值，在实际应用中可能需要动态获取
  const initalVals = [2, 25, 60]; 

  const exchangeValues = {
    "default": 1, 
    'eur': eurRate,
    'usd': usdRate,
    "gbp": gbpRate
  };

  selectCoin.addEventListener('change', (event) => {
    let coinSelected = event.target.value;

    initalVals.forEach((value, index) => {
      const rate = exchangeValues[coinSelected];
      const convertedPrice = value * rate;
      priceCoinsArr[index].innerHTML = convertedPrice.toFixed(2); // 保留两位小数
    });
  });
}

登录后复制

5. 注意事项与最佳实践

初始值动态读取: 在本教程中，initalVals是硬编码的。在实际应用中，这些初始价格可能需要从HTML元素的textContent或dataset属性中动态读取，或者从后端API获取。例如：
```
const initalVals = Array.from(priceCoinsArr).map(el => parseFloat(el.innerHTML));
```
登录后复制
这样可以确保即使HTML中的初始价格发生变化，JavaScript也能正确读取。
错误处理: fetch请求应包含.catch()块来处理网络错误或API响应错误，并向用户提供反馈。
货币格式化: 使用toFixed(2)可以确保货币显示为两位小数。对于更复杂的货币格式（如千位分隔符、货币符号），可以考虑使用Intl.NumberFormat API。
加载状态: 在汇率数据加载期间，可以显示一个加载指示器，以改善用户体验。
汇率数据源: 本例使用了一个公共API，但在生产环境中，您可能需要使用更稳定、可靠且具有速率限制管理功能的汇率服务。
浮点数精度: JavaScript处理浮点数时可能存在精度问题。对于金融应用，可能需要使用专门的库（如decimal.js）来确保计算的精确性。
默认选项: option value="default" 确保了用户在未选择具体货币时有一个初始状态。当选择"default"时，汇率设置为1，意味着显示原始价格。

总结

通过本教程，我们学习了如何使用JavaScript有效地实现多个价格元素的动态货币转换。关键在于正确选择所有目标DOM元素（querySelectorAll），存储原始价格以避免累积转换错误（initalVals），并利用事件监听器在用户交互时实时更新显示。遵循这些原则和最佳实践，可以构建出功能强大且用户体验良好的动态货币转换功能。

以上就是动态货币转换：JavaScript实现多价格元素实时更新教程的详细内容，更多请关注php中文网其它相关文章！