静态购物车加减器
-
-
-
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="a">
<div id="left">
<div class="jian">-</div>
</div>
<div class="center">
<input id="ipt" />
</div>
<div id="right">
<div class="jia">+</div>
</div>
</div>
</body>
</html>
css部分
.a{
display: flex;
height: 50px;
align-items: center;
justify-content: center;
}
#left{
width: 50px;
height: 50px;
border: 1px solid rgb(203, 213, 231);
background-color: rgb(43, 230, 18);
opacity: .6;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
#left .jian{
color: rgb(214, 214, 214);
}
#right{
width: 50px;
height: 50px;
border: 1px solid rgb(203, 231, 205);
background-color: rgb(120, 69, 201);
opacity: .6;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
#right .jia{
color: rgb(105, 105, 105);
}
.center{
width: 140px;
height: 50px;
border:1px solid rgb(203, 231, 210);
border-top:1px solid rgb(203, 213, 231);
border-bottom: 1px solid rgb(203, 213, 231);
display: flex;
justify-content: center;
align-items: center;
}
.center input{
width: 80px;
text-align: center;
border:none ;
outline: none;
font-size: 20px;
}
const leftclick=document.getElementById("left")
const rightclick=document.getElementById("right")
document.getElementById('ipt').value=0
rightclick.onclick=function(){
if(document.getElementById('ipt').value>9){
return alert("最大值为11")
return
}
document.getElementById('ipt').value=Number(document.getElementById('ipt').value)+1
}
leftclick.onclick=function(){
if(document.getElementById('ipt').value<1){
return alert("最大值为11")
}
document.getElementById('ipt').value=Number(document.getElementById('ipt').value)-1
}
