再给我一个不一样的应用监听属性实现人民币和美元之间的汇率换算代码
时间: 2023-12-25 18:04:19 浏览: 75
好的,以下是另一种实现方式:
```html
<input type="text" id="cny" placeholder="请输入人民币金额">
<input type="text" id="usd" placeholder="美元金额">
<script>
// 获取人民币输入框和美元输入框的 DOM 元素
const cnyInput = document.getElementById('cny');
const usdInput = document.getElementById('usd');
// 定义汇率常量
const exchangeRate = 6.5; // 假设汇率为 1:6.5
// 监听人民币输入框的输入事件
cnyInput.addEventListener('input', function() {
// 获取人民币输入框的值
const cnyValue = parseFloat(cnyInput.value);
// 判断输入值是否合法
if (isNaN(cnyValue)) {
usdInput.value = ''; // 清空美元输入框的值
return;
}
// 计算美元金额
const usdValue = (cnyValue / exchangeRate).toFixed(2);
// 更新美元输入框的值
usdInput.value = usdValue;
});
// 监听美元输入框的输入事件
usdInput.addEventListener('input', function() {
// 获取美元输入框的值
const usdValue = parseFloat(usdInput.value);
// 判断输入值是否合法
if (isNaN(usdValue)) {
cnyInput.value = ''; // 清空人民币输入框的值
return;
}
// 计算人民币金额
const cnyValue = (usdValue * exchangeRate).toFixed(2);
// 更新人民币输入框的值
cnyInput.value = cnyValue;
});
</script>
```
这段代码实现了双向转换,可以在人民币输入框和美元输入框之间相互转换。在输入框的输入事件中,先判断输入值是否合法,如果不合法则清空另一个输入框的值。然后根据当前汇率进行换算,最后更新另一个输入框的值。`toFixed(2)` 方法可以保留两位小数。
阅读全文