汇率换算器：输入金额选币种，实时折算一眼看清，出国剁手心里有数

打开网页就是一个汇率换算面板：输入金额、选好「从哪个币种」和「换成哪个币种」，结果立刻跳出来；中间一个按钮能把两边币种一键对调，下面还挂着一张可编辑的汇率表，谁的汇率不对自己改。12 种常用货币开箱即用，全部在浏览器本地算完，不出国也能把账算明白。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「汇率换算」这件事收敛成一个打开即用的单页工具：

实时折算：输入金额、切换任一币种，结果不用点按钮就自动更新，主结果行大字显示「719.42 CNY」这类结果。
12 种常用货币：人民币、美元、欧元、英镑、日元、港币、韩元、澳元、加元、瑞郎、新加坡元、新台币，下拉直接选。
一键对调：中间的换向按钮把「美元 → 人民币」瞬间切成「人民币 → 美元」，还带 180° 旋转动画。
快捷币种：CNY / USD / EUR / GBP / JPY 五个高频币种做成小胶囊按钮，点一下直接切换。
可编辑汇率表：展开「配置面板」能看到 12 种货币的汇率，本地改完点保存就生效，localStorage 记住你的改动。
公式透明：结果下方同时显示「1 USD = 7.19 CNY」和完整计算过程，不是黑盒。
纯前端：所有计算都在浏览器本地完成，不上传任何数据。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「汇率换算器」网页应用：输入金额并选择源币种和目标币种即可实时换算，支持 12 种常用货币、币种快速切换、源/目标币种一键对调、汇率表可编辑并本地保存；界面简洁美观，结果同时显示换算公式，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这篇项目里的实际动作：

在沙箱里创建项目目录，写出单文件 index.html（最终约 17.6 KB），没有任何第三方依赖。
找到 3000 端口空闲，用 python3 -m http.server 3000 --bind 0.0.0.0 起服务，curl 自检通过后给出内部访问地址。
打开预览页面验证时，发现初版汇率方向写反了：输入 100 USD 却显示成 13.90 CNY，明显不对。定位到 cross = rFrom / rTo 这个交叉汇率公式，改成 cross = rTo / rFrom 后，100 USD 正确得到 719.42 CNY。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 汇率表以人民币为锚，「1 CNY = ? 外币」统一存储

默认汇率表把人民币定义为基准 1，其他币种存的是「1 元人民币等于多少该币种」，这样任意两种外币之间的交叉汇率都从人民币兜一圈算出来：

const DEFAULT_RATES = {
  CNY: { name: "人民币", rate: 1 },
  USD: { name: "美元",   rate: 0.139 },
  EUR: { name: "欧元",   rate: 0.128 },
  JPY: { name: "日元",   rate: 20.83 },
  // ... 共 12 种
};

2. 交叉汇率：rTo / rFrom，一个公式吃遍所有组合

源币种和目标币种都换算回「1 CNY 对应多少」，两者一除就是交叉汇率。比如 USD→CNY：1 / 0.139 ≈ 7.19，即 1 美元约等于 7.19 人民币：

function convert() {
  const from = fromSel.value, to = toSel.value;
  const rFrom = rates[from].rate, rTo = rates[to].rate;
  const cross = rTo / rFrom;                 // 交叉汇率
  const out = amt * cross;
  resultValue.textContent = `${formatNumber(out)} ${to}`;
  formulaEl.innerHTML =
    `公式：<b>1 ${from}</b> = <b>${formatNumber(cross)} ${to}</b><br>` +
    `计算：<b>${amt} ${from}</b> × ${formatNumber(cross)} = <b>${formatNumber(out)} ${to}</b>`;
}

3. 小数位自适应：金额大小不同，保留位数也不同

formatNumber 根据数值量级动态决定保留几位：小于 0.01 保留 6 位（日元这种大数反向换算时很有用），小于 1 保留 4 位，否则常规 2 位，最后用 toLocaleString("zh-CN") 加上千分位：

function formatNumber(n) {
  if (!isFinite(n)) return "—";
  const abs = Math.abs(n);
  let digits = 2;
  if (abs !== 0 && abs < 0.01) digits = 6;
  else if (abs < 1) digits = 4;
  else if (abs >= 1000) digits = 2;
  return n.toLocaleString("zh-CN", {
    minimumFractionDigits: digits,
    maximumFractionDigits: digits
  });
}

4. 汇率可编辑 + localStorage 记住你的改动

配置面板里每一行汇率都能改，保存时校验「必须大于 0」，再强制把人民币拉回 1 防止基准漂移；改动写入 localStorage，下次打开还认得：

function saveRatesToStorage() {
  const slim = {};
  for (const k of Object.keys(rates)) slim[k] = { rate: rates[k].rate };
  localStorage.setItem("fx_rates", JSON.stringify(slim));
}

5. 换向按钮的旋转动画，结果瞬间对调

swap() 交换两个下拉框的值后重新计算，按钮 hover 时用 CSS transform: rotate(180deg) 给一个轻量的换向反馈：

function swap() {
  const tmp = fromSel.value;
  fromSel.value = toSel.value;
  toSel.value = tmp;
  updateQuickActive();
  convert();
}

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-currency-converter

总结

汇率换算器把「输入金额、选两个币种、看结果」这条链路压到一个页面上：汇率以人民币为锚存储，任意组合都靠 rTo / rFrom 一个交叉公式兜底；小数位按金额量级自适应；汇率表还能本地编辑并用 localStorage 记下来。整个过程没有第三方依赖，纯前端跑通，验证时顺手修掉了汇率方向写反的问题。后续还可以接入实时汇率 API、按日期看历史汇率，或加一个「出行预算」多币种合计面板。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-09-05 13:36 新科技观察员阅读(13) 评论(0) 收藏举报

刷新页面返回顶部