<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 80px;
}
input[type=text] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type=button] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly>
<input type="button" value="+" id="add">
<input type="button" value="-" id="reduce" disabled>
<script>
// 1.获取元素
let total = document.querySelector('#total');
let add = document.querySelector('#add');
let reduce = document.querySelector('#reduce');
// 2.点击加号事件监听
add.addEventListener('click', () => {
//i++隐式转换
total.value++;
reduce.disabled = false;
})
// 3.点击减号事件监听
reduce.addEventListener('click', () => {
//i--隐式转换
total.value--;
if(total.value <= 1) {
reduce.disabled = true;
}
})
</script>
</div>
</body>
</html>
04-03
472
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-12
3932
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-16
484
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-19
1273
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)