HTML汇率转换器实现教程

本文详解了如何用纯HTML与JavaScript打造一个健壮、实用的前端汇率转换器，直击开发者常遇的CORS跨域难题——指出其根源在于第三方API未配置响应头，并给出两种切实可行的解决方案：搭建后端代理或切换至支持CORS的免费CDN源（如currency-api）；同时深入剖析实时换算的关键细节：通过input事件监听+300ms防抖避免频繁请求、严格匹配ISO 4217货币代码防止NaN错误、巧用localStorage缓存昨日汇率实现离线可用，并强调用户体验优化（如toFixed精度处理、视觉降级提示），让工具既可靠又人性化。

用 fetch 调用免费汇率 API 时，为什么总返回 CORS 错误？

浏览器直接 fetch 第三方汇率接口（比如 https://api.exchangerate-api.com/v4/latest/USD）大概率会失败，不是因为接口挂了，而是服务端没配 Access-Control-Allow-Origin。这不是你代码写错了，是浏览器的同源策略在拦你。

可行解只有两个：

• 后端代理：自己搭个轻量接口（比如 Express 或 Flask），由它去请求汇率 API，再把结果转发给你前端——这是最稳妥、可长期维护的方式
• 换支持 CORS 的免费源：目前较稳定的是 https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json（注意路径里是 usd.json，返回的是以 USD 为基准的全币种汇率）
• 别用 https://api.fixer.io 或老版 exchangeratesapi.io：它们已停更或强制 require API key，且不开放 CORS

HTML + JS 实现实时换算，关键在监听 input 和防抖

用户一边打数字一边换算，如果每敲一个键就调一次 API，既浪费请求又容易触发限流。得加简单防抖，等用户停顿 300ms 再执行转换。

核心逻辑链很短：

• 监听 <input id="amount"> 的 input 事件（不是 change，后者要失焦才触发）
• 用 setTimeout + clearTimeout 做防抖，每次输入先清掉上一个定时器
• 拿到数值后，查缓存的汇率对象（比如 rates['CNY']），直接乘算：result = amount * rates['CNY']
• 结果保留两位小数用 toFixed(2)，但注意它返回字符串，做计算前得用 parseFloat() 转回来

下拉选择货币时，<select> 的 value 必须和 API 返回的 currency code 严格一致

API 返回的字段名是标准 ISO 4217 码，比如人民币是 CNY，不是 RMB 或 CHN；日元是 JPY，不是 JPY¥。选错一个字母，rates['cny'] 就是 undefined，结果变成 NaN。

建议这样写 <select>：

<select id="to-currency">
  <option value="CNY">人民币 (CNY)</option>
  <option value="JPY">日元 (JPY)</option>
  <option value="EUR">欧元 (EUR)</option>
&lt;/select&gt;

别图省事用中文当 value，也别加空格或括号——这些都会导致查表失败。

离线时怎么让工具还能用基础功能？

完全依赖网络的汇率工具，一断网就变废铁。至少该存一份“昨日汇率”作为降级方案。

• 首次成功加载汇率后，用 localStorage.setItem('lastRates', JSON.stringify(rates)) 存下来
• fetch 失败时，立刻读 localStorage.getItem('lastRates') 并 JSON.parse 恢复
• 加个视觉提示，比如在结果旁显示 （数据来自昨日）
• 注意：localStorage 只存字符串，不能直接存 Date 或函数，别试图塞 new Date() 进去

汇率变动不会秒级跳变，用 24 小时内的快照撑住离线场景，已经比空白报错友好太多。真正要精确到分钟级的，本就不该是纯前端工具该干的事。

好了，本文到此结束，带大家了解了《HTML汇率转换器实现教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！