本教程详细讲解如何利用JavaScript和外部API，为网页上的多个价格实现动态货币转换功能。我们将解决常见的转换错误，例如重复转换导致数值不准确，以及如何确保所有显示的价格都能同步更新，从而提供一个健壮且用户友好的货币转换解决方案。
在现代Web应用中，动态显示和转换货币价格是一项常见需求。本教程将引导您通过JavaScript实现一个功能完善的货币转换器，该转换器能够从外部API获取实时汇率，并将其应用于网页上多个商品的价格显示。我们将特别关注如何避免常见的逻辑错误，例如在多次转换中保持价格的准确性，以及如何同时更新所有相关的DOM元素。
1. 准备HTML结构
首先，我们需要一个简单的HTML结构来展示价格和货币选择器。这里，我们使用一个下拉菜单来选择货币，并用多个
标签来显示不同的价格。
Select coin EUR USD GBP2
25
60
Select coin EUR USD GBP2
25
60
要点：
立即学习“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); }); });}
代码解析与关键改进：
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):
动态货币转换器 body { font-family: Arial, sans-serif; margin: 20px; } h1 { margin: 10px 0; } select { padding: 8px; margin-bottom: 20px; } Select coin EUR USD GBP商品A价格: 2
商品B价格: 25
商品C价格: 60
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请求失败的情况，提高程序的健壮性。用户体验： 考虑在汇率加载期间显示加载指示器，并在转换完成后提供视觉反馈。
以上就是使用JavaScript实现多货币价格动态转换教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603378.html
微信扫一扫 
支付宝扫一扫 
