<!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>