html 订餐 加减代码
时间: 2023-05-31 16:01:56 浏览: 59
以下是一个简单的HTML订餐加减代码示例:
```html
<div>
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
<button onclick="decreaseQuantity()">-</button>
<button onclick="increaseQuantity()">+</button>
</div>
<script>
function decreaseQuantity() {
var quantityInput = document.getElementById("quantity");
var currentQuantity = parseInt(quantityInput.value);
if (currentQuantity > 1) {
quantityInput.value = currentQuantity - 1;
}
}
function increaseQuantity() {
var quantityInput = document.getElementById("quantity");
var currentQuantity = parseInt(quantityInput.value);
if (currentQuantity < 10) {
quantityInput.value = currentQuantity + 1;
}
}
</script>
```
这个代码片段包括一个输入框、一个减少按钮和一个增加按钮。输入框有一个最小值为1和最大值为10。点击减少按钮将减少输入框中的数量,但不会小于1。点击增加按钮将增加输入框中的数量,但不会超过10。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)