不僅僅是一個input框,我們不僅可以在裏面直接輸入數字,而且我們點擊左邊或者右邊的按鈕會實現輸入框數量的減少和增加,點擊只能增加一個或者減少一個。
效果圖
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="cut" type="button" value="-" style="color: red;"/>
<input id="num" type="text" style=" width:200px; text-align:center" value="0"/>
<input id="add" type="button" value="+" style="color: blue;"/>
</body>
<script type="text/javascript">
$(function(){
var price=0;
$("#cut").click(function(){
price=$("#num").val();
if($("#num").val()==0){
return
}
else{
price--;
}
$("#num").val(price);
})
$("#add").click(function(){
price=$("#num").val();
price++;
$("#num").val(price);
})
})
</script>
</html>