zoukankan      html  css  js  c++  java
  • 数字键盘

    /*数字键盘start*/
    
            .markBox {
                background: #fff;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 4.8rem;
            }
    
            .flexed {
                border-top: 1px solid #e8e8e8;
                 100%;
                height: 100%;
                overflow: hidden;
            }
    
            .flexed .spuared {
                 75%;
                float: left;
                overflow: hidden;
            }
    
            .flexed .rightBtn {
                 25%;
                float: left;
            }
    
            .spuared li {
                 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 {
                 50%;
                border-bottom: none;
            }
    
            .rightBtn .del {
                 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');
        }
  • 相关阅读:
    Sass
    小程序_统计字符
    小程序_乘法表
    abbreviation(缩写)
    Linux命令整理
    生出树状的文件夹结构
    Excel的使用技巧
    小程序_数字从小到大输出
    Delphi 之Inherited详解
    学习结构[记录]类型(4)
  • 原文地址:https://www.cnblogs.com/xushengguan/p/10040029.html
Copyright © 2011-2022 走看看