jquery 数字键盘

109 阅读 0 评论 72 点赞

我是靠谱客的博主自由巨人，最近开发中收集的这篇文章主要介绍jquery 数字键盘，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<body>
    <!--        键盘输入框-->
    <div class='get-num'></div>
</body>

	init()
    function init() {
        var numStr = ''
        for (var i = 1; i < 10; i++) {
            numStr += ' <span class="key-item" data-num=' + i + '>' + i + '</span>'
        }
        var str = '<div class="keyboard">' +
            numStr +
            '<span class="key-item clear" data-num="clear">清空</span>' +
            '<span class="key-item zero" data-num="0">0</span>' +
            '<span class="key-item delete" data-num="delete">删除</span>' +
            '</div>'

        $('body').append(str)
    //    这个选择器需要改为指定的外层容器
    }


    $('.keyboard').on('click', '.key-item', function () {
        var num = $(this).data('num')
        var $getNum = $('.get-num')
        var currentNum = $getNum.text()
        switch (String(num)) {
            //清空键
            case 'clear':
                $getNum.text('');
                break;
            //删除键
            case 'delete':
                var deleteNum = currentNum.slice(0, -1)
                $getNum.text(deleteNum);
                break;
            default:
                currentNum += num;
                $getNum.text(currentNum);
                break;
        }
    })

   .keyboard {
            width: 7.5rem;
            height: 6rem;
            padding: 0.1rem;
            background-color: #f8f2e6;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .keyboard .key-item {
            width: 31.5%;
            height: 23%;
            border: 0.05rem solid #eddfc1;
            border-radius: 0.18rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            background-color: #fff;
            color: #a0a0a0;
        }

        .get-num {
            width: 7.5rem;
            height: 1rem;
            padding-left: 0.1rem;
            line-height: 1rem;
            border: 0.02rem solid grey;
            border-radius: 0.2rem;
            font-size: 0.5rem;
            overflow: hidden;
        }