样式:
<style>
.sum{
width: 300px;
height: 200px;
background-color: rgb(203,203,204);
margin: 50px auto;
}
.sum_left{
width: 200px;
height: 190px;
float: left;
background-color: aliceblue;
margin: 5px 5px;
text-align: center;
line-height: 190px;
font-size: 50px;
}
button{
width: 80px;
height: 85px;
font-size: 50px;
}
button:nth-of-type(1){
margin-top: 5px;
}
</style>
html
<div class="sum">
<div class="sum_left">1</div>
<div class="sum_right">
<p class="top"><button>+</button></p>
<p class="bottom"><button>-</button></p>
</div>
</div>
js
<script>
const sum_right=document.querySelector('.top>button')
const sum_right1=document.querySelector('.bottom>button')
const sum_left=document.querySelector('.sum_left')
sum_right.addEventListener('click',function(){
sum_left.innerHTML++
if(sum_left.innerHTML==='1'){
sum_right1.disabled=true
}else{
sum_right1.disabled=false
}
})
sum_right1.addEventListener('click',function(){
sum_left.innerHTML--
if(sum_left.innerHTML==='1'){
sum_right1.disabled=true
}else{
sum_right1.disabled=false
}
})
</script>
效果