<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}
body,html{
width: 100%;
height: 100%;
}
.box{
width: 65%;
height: 180px;
background: white;
position: relative;
}
.num-p{
border-bottom: 1px solid #ccc;
height: 30%;
width: 100%;
}
.num-p span{
width: 15%;
font-size: 30px;
position: absolute;
display: block;
box-sizing: border-box;
height: 30%;
line-height: 170%;
color: red;
}
.num-p span:first-child{
left: 0;
text-align: right;
}
.num-p span:last-child{
right: 0;
text-align: left;
}
.num-p input{
width: 70%;
height: 30%;
box-sizing: border-box;
outline: none;
border: none;
border-radius: 10px;
left: 15%;
font-size: 18px;
position: absolute;
display: block;
text-align: center;
}
button{
width: 80%;
height: 35px;
background: #ddd;
border-radius: 5px;
margin: 20px auto;
display: block;
border: none;
outline: none;
font-size: 15px;
}
.title-p{
text-align: center;
font-size: 18px;
padding: 13px 0;
overflow: hidden;
white-space:nowrap;
width: 81%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<p class="title-p">商品名称商品名称商品名称商品名称商品名称商品名称</p>
<p class="num-p">
<span id="span1">-</span>
<input type="text" placeholder="输入数量" id="inpval" >
<span id="span2">+</span>
</p>
<button>确认</button>
</div>
</div>
</body>
<script>
var input=document.getElementById(inpval);
var span1=document.getElementById(span1);
var span2=document.getElementById(span2);
input.addEventListener(keyup,inputHander);
span1.addEventListener(click,clickHander1);
span2.addEventListener(click,clickHander2);
function inputHander() {
this.value=this.value.replace(/[^0-9-]+/,);
if(this.value<1){
this.value=1
}
}
function clickHander2() {
input.value++
}
function clickHander1() {
input.value--;
if (input.value < 1) {
input.value = 1
}
}
</script>
</html>
