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