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>
猜你喜欢
