輸入框數量加減

不僅僅是一個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>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章