汇率换算器:输入金额选币种,实时折算一眼看清,旅行比价心里有数
打开网页就是一个汇率换算面板输入金额、选好「从哪个币种」和「换成哪个币种」结果立刻跳出来中间一个按钮能把两边币种一键对调下面还挂着一张可编辑的汇率表谁的汇率不对自己改。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?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 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 元人民币等于多少该币种」这样任意两种外币之间的交叉汇率都从人民币兜一圈算出来constDEFAULT_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→CNY1 / 0.139 ≈ 7.19即 1 美元约等于 7.19 人民币functionconvert(){constfromfromSel.value,totoSel.value;constrFromrates[from].rate,rTorates[to].rate;constcrossrTo/rFrom;// 交叉汇率constoutamt*cross;resultValue.textContent${formatNumber(out)}${to};formulaEl.innerHTML公式b1${from}/b b${formatNumber(cross)}${to}/bbr计算b${amt}${from}/b ×${formatNumber(cross)} b${formatNumber(out)}${to}/b;}3. 小数位自适应金额大小不同保留位数也不同formatNumber根据数值量级动态决定保留几位小于 0.01 保留 6 位日元这种大数反向换算时很有用小于 1 保留 4 位否则常规 2 位最后用toLocaleString(zh-CN)加上千分位functionformatNumber(n){if(!isFinite(n))return—;constabsMath.abs(n);letdigits2;if(abs!0abs0.01)digits6;elseif(abs1)digits4;elseif(abs1000)digits2;returnn.toLocaleString(zh-CN,{minimumFractionDigits:digits,maximumFractionDigits:digits});}4. 汇率可编辑 localStorage 记住你的改动配置面板里每一行汇率都能改保存时校验「必须大于 0」再强制把人民币拉回 1 防止基准漂移改动写入localStorage下次打开还认得functionsaveRatesToStorage(){constslim{};for(constkofObject.keys(rates))slim[k]{rate:rates[k].rate};localStorage.setItem(fx_rates,JSON.stringify(slim));}5. 换向按钮的旋转动画结果瞬间对调swap()交换两个下拉框的值后重新计算按钮 hover 时用 CSStransform: rotate(180deg)给一个轻量的换向反馈functionswap(){consttmpfromSel.value;fromSel.valuetoSel.value;toSel.valuetmp;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?sourcedmzntgwsfsourceaddmzntgwwbwz