用JavaScript实现原数字可改上下0.05,超出后提示:不含税金额、税额调整请在原金额的5分钱以内
时间: 2024-04-29 15:24:32 浏览: 19
以下是一个实现该功能的JavaScript代码:
```javascript
// 获取原始金额和税率的输入框元素
var amountInput = document.getElementById("amount-input");
var taxRateInput = document.getElementById("tax-rate-input");
// 获取显示结果的元素
var amountDisplay = document.getElementById("amount-display");
var taxDisplay = document.getElementById("tax-display");
// 定义每次调整的步长为0.05
var step = 0.05;
// 监听原始金额输入框的变化
amountInput.addEventListener("input", function() {
// 获取原始金额和税率的值
var amount = parseFloat(amountInput.value);
var taxRate = parseFloat(taxRateInput.value);
// 计算税额
var tax = amount * taxRate;
// 如果调整后的原始金额与原始金额相差超过0.05,则提示错误信息
if (Math.abs(amount - parseFloat(amountInput.dataset.originalValue)) > step) {
alert("不含税金额调整请在原金额的5分钱以内");
amountInput.value = amountInput.dataset.originalValue;
} else {
// 更新显示结果的元素
amountDisplay.textContent = amount.toFixed(2);
taxDisplay.textContent = tax.toFixed(2);
}
});
// 监听税率输入框的变化
taxRateInput.addEventListener("input", function() {
// 获取原始金额和税率的值
var amount = parseFloat(amountInput.value);
var taxRate = parseFloat(taxRateInput.value);
// 计算税额
var tax = amount * taxRate;
// 更新显示结果的元素
amountDisplay.textContent = amount.toFixed(2);
taxDisplay.textContent = tax.toFixed(2);
});
```
其中,HTML部分可以是这样的:
```html
<label for="amount-input">原始金额:</label>
<input type="number" id="amount-input" data-original-value="100.00">
<br>
<label for="tax-rate-input">税率:</label>
<input type="number" id="tax-rate-input" value="0.13">
<br>
<label>不含税金额:</label>
<span id="amount-display"></span>
<br>
<label>税额:</label>
<span id="tax-display"></span>
```
这里的关键点是将原始金额的初始值保存在`data-original-value`属性中,然后在输入变化时进行比较,以判断是否超出了可调整范围。如果超出了范围,则弹出提示框并将原始金额的值还原为初始值。否则,就更新显示结果的元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)