JS-按钮加减操作

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		button{
			width:40px;
			height:40px;
			font-size:24px;
			vertical-align:bottom;
		}
		#num{
			box-sizing:border-box;
			height:40px;
			width:60px;
			font-size:24px;
			text-align:center;
		}
	</style>
 </head>
 <body>
  <div>
		<button onclick="btnOperate('-')">-</button>
		<input id="num" value="1">
		<button onclick="btnOperate('+')">+</button>
	</div>

	<script src="common.js"></script>
	<script>
		function btnAdd(){
			//1、获取#num的value
			var value = document.getElementById("num").value;
			//2、将取出来的值做+1操作,再赋值给#num的value
			value = Number(value) + 1;
			document.getElementById("num").value = value;
		}

		function btnReduce(){
			//1、获取#num的值
			var value = Number(document.getElementById("num").value);
			//2、判断#num的值是否小于等于1,如果小于等于1的话,则将值改为1
			//3、否则,可以实现 - 1 操作
			if(value <= 1){
				value = 1;
			}else{
				value -= 1;
			}
			//4、将 value 的值赋值给 #num
			document.getElementById("num").value = value;
		}
		
		/**
		 * 做 数值的更改操作
		 * 参数 op :表示 符号 
		 */
		function btnOperate(op){
			var value = Number($("num").value);
			if(op == '+'){
				value += 1;
			}else if(op == '-'){
				if(value <= 1){
					value = 1;
				}else{
					value -= 1;
				}
			}
			$("num").value=value;
		}
	</script>
 </body>
</html>

posted @ 2018-11-11 20:32  IndustriousHe  阅读(5902)  评论(1编辑  收藏  举报