数字键盘

Posted 2021-01-23 xushengguan

/*数字键盘start*/

        .markBox {
            background: #fff;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 4.8rem;
        }

        .flexed {
            border-top: 1px solid #e8e8e8;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .flexed .spuared {
            width: 75%;
            float: left;
            overflow: hidden;
        }

        .flexed .rightBtn {
            width: 25%;
            float: left;
        }

        .spuared li {
            width: 33.33%;
            height: 1.2rem;
            border-right: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            font-size: 0.6rem;
            color: #212121;
            text-align: center;
            line-height: 1.2rem;
            float: left;
        }

        .spuared li:active {
            background: #ecedef;
        }

        .spuared li.whf {
            width: 50%;
            border-bottom: none;
        }

        .rightBtn .del {
            width: 100%;
            height: 1.2rem;
            background: url(../../image/del.png) no-repeat center;
            background-size: 37px 27px;
            border-bottom: 1px solid #e8e8e8;
        }

        .rightBtn .confirm {
            padding: 10px;
            text-align: center;
            font-size: 15px;
            line-height: 20px;
            writing-mode: vertical-lr;
        }

        .confirm p {
            font-size: 0.44rem;
            line-height: 52px;
        }
        /*数字键盘end*/

 

<div class="markBox">
        <div class="flexed">
            <ul class="spuared">
                <li tapmode onclick="goScore(this)">1</li>
                <li tapmode onclick="goScore(this)">2</li>
                <li tapmode onclick="goScore(this)">3</li>
                <li tapmode onclick="goScore(this)">4</li>
                <li tapmode onclick="goScore(this)">5</li>
                <li tapmode onclick="goScore(this)">6</li>
                <li tapmode onclick="goScore(this)">7</li>
                <li tapmode onclick="goScore(this)">8</li>
                <li tapmode onclick="goScore(this)">9</li>
                <li class="whf" tapmode onclick="goScore(this)">.</li>
                <li class="whf" tapmode onclick="goScore(this)">0</li>
            </ul>
            <div class="rightBtn" id="wrap">
                <div class="del" tapmode onclick="Del()"></div>
                <div class="confirm flex-center" id="main" tapmode onclick="Pay()">
                    <p>支&nbsp;&nbsp;&nbsp;付</p>
                </div>
            </div>
        </div>
    </div>

function goScore(e) {
        var result = $api.val($api.dom(‘#result‘));
        var num = $api.text(e);
        if (!result && num == ‘.‘) {
            // result = ‘‘;
            return false;
        } else {
            if ((result.split(‘.‘)).length - 1 > 0 && num.indexOf(‘.‘) > -1) {
                return false;
            } else {
                result += num;
            }
        }
        $api.val($api.dom(‘#result‘), result);

    }

    // 清除
    function Del() {
        $api.val($api.dom(‘#result‘), ‘‘);
        $api.css($api.dom(‘.txt‘), ‘display:none‘);
    }