输入框内的数字加减

最新推荐文章于 2023-10-30 15:15:40 发布

淡漠爱清凉

最新推荐文章于 2023-10-30 15:15:40 发布

阅读量1.3k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Mr_115/article/details/127704423

版权

页面上有两个按钮，中间有一个输入框，往输入框里输入数字，每点一次左侧的按钮，输入框的值减一，输入框的值最小为1，最大为100，点击右侧按钮输入框的数值将每次加1

样式设置

<style>
    button {
        font-size: 20px;
        width: 50px;
        height: 35px;

    }

    input {
        width: 60px;
        height: 25px;
        padding-top: 5px;
    }
</style>

内容设置

<body>
    <div style="text-align: center;padding-top: 10%;">
        <button id="subtract" onclick="jian()">-</button>
        <input type="text" id="inp">
        <button id="add" onclick="jia()">+</button>
    </div>
    <script>

        var min = 1;
        var max = 100;
        function isEmpty() {  //判断输入框是否为空
            var inp = document.getElementById('inp').value;
            if (inp == null) {
                return true;
            } else {
                return false;
            }
        }
        function jian() {
            var inp = parseInt(document.getElementById('inp').value);
            if (inp <= min) {
                alert('输入值至少为' + min)

            } else {
                inp -= 1;
                if (inp <= 1) {
                    document.getElementById('inp').value = min
                } else {
                    document.getElementById('inp').value = inp;
                }
            }
        };
        function jia() {
            var inp = parseInt(document.getElementById('inp').value);
            if (inp > max) {
                alert('输入最大值为' + max);
            } else {
                inp += 1;
                document.getElementById('inp').value = inp;
            }
        }

    </script>
</body>

效果图

input框输入24，点击减号