1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    <style>
        div {
            width: 80px;
        }
        
        input[type=text] {
            width: 50px;
            height: 44px;
            outline: none;
            border: 1px solid #ccc;
            text-align: center;
            border-right: 0;
        }
        
        input[type=button] {
            height: 24px;
            width: 22px;
            cursor: pointer;
        }
        
        input {
            float: left;
            border: 1px solid #ccc;
        }
    </style>


    <div>
        <input type="text" id="total" value="1" readonly>
        <input type="button" value="+" id="add">
        <input type="button" value="-" id="reduce" disabled>
        <script>
        </script>
    </div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    <script>
        // total.value 是一个字符串"1"
        let total = document.querySelector('#total');
        let add = document.querySelector('#add');
        let reduce = document.querySelector('#reduce');
        // 点击add，事件监听
        add.addEventListener('click', function() {
                reduce.disabled = false;
                // 递增递减隐式转换为number
                total.value++
            })
            // 点击reduce，事件监听
        reduce.addEventListener('click', function() {
            total.value--
                if (total.value <= 1) {
                    reduce.disabled = true;
                }
        })
    </script>