zoukankan      html  css  js  c++  java

  • h5车牌号输入键盘

    自己更换jQuery文件路径

    1.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
    <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" >
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>停车缴费</title>
    <link rel="stylesheet" href="css/binding.css">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/binding.js"></script>
</head>
<body>
    <header>
        <div class="top"></div>
    </header>
    <section style="margin-top: 40px;">
        <div class="plate">
            <ul id="plate">
                <li>粤</li>
                <li>B</li>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <div class="new">
                        <span>+</span>
                        <i>新能源</i>
                    </div>
                </li>
            </ul>
        </div>

    </section>
   
    <footer>
        <!-- 键盘 -->
        <div class="keyboard" id="shutkey">
            <div class="shut" id="shut">关闭</div>
            <ul id="keyboard">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>

                <li>Q</li>
                <li>W</li>
                <li>E</li>
                <li>R</li>
                <li>T</li>
                <li>Y</li>
                <li>U</li>
                <li>P</li>
                <li>港</li>
                <li>澳</li>
                
                <li>A</li>
                <li>S</li>
                <li>D</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li>学</li>
                
                <li>Z</li>
                <li>X</li>
                <li>C</li>
                <li>V</li>
                <li>B</li>
                <li>N</li>
                <li>M</li>
                <li>警</li>
                <li>删除</li>
            </ul>
        </div>
        <!-- 地区车牌简称 -->
        <div class="area" id="area">
            <div class="shut" id="shuta">关闭</div>
            <ul id="keyboarda">
                <div class="area-one">
                    <li>京</li>
                    <li>津</li>
                    <li>沪</li>
                    <li>渝</li>
                    <li>蒙</li>
                    <li>新</li>
                    <li>藏</li>
                    <li>宁</li>
                    <li>桂</li>
                    <li>黑</li>
                </div>
                <div class="area-tow">
                    <li>吉</li>
                    <li>辽</li>
                    <li>晋</li>
                    <li>冀</li>
                    <li>青</li>
                    <li>鲁</li>
                    <li>豫</li>
                    <li>苏</li>
                    <li>皖</li>
                </div>
                <div class="area-three">
                    <li>浙</li>
                    <li>闽</li>
                    <li>赣</li>
                    <li>湘</li>
                    <li>鄂</li>
                    <li>粤</li>
                    <li>琼</li>
                    <li>甘</li>
                </div>
                <div class="area-four">
                    <li>陕</li>
                    <li>贵</li>
                    <li>云</li>
                    <li>川</li>
                    <!-- <li>删除</li> -->
                </div>
            </ul>
        </div>
    </footer>
</body>
</html>

    　　2. css

    /* base 公共样式 */
html, body, header, div, h1, h2, h3, h4, form, input, p, img, ul, li, a, span, i, strong { padding: 0; margin: 0; }

html, body {
    font-size: 50px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: 'Microsoft YaHei';
    line-height: 1;
    min- 320px;
    background-color: #f0f0f0;
}

ul, li {
    list-style: none;
}

i {
    font-style: normal;
}

a {
    text-decoration: none;
    color: #333;
}

img {
    border: 0;
}

input {
    outline: none;
    border: none;
}

/* header部分 */
header {
     100%;
    font-size: 0;
    text-align: center;
    font-family: 'Microsoft YaHei';
}
header .top {
     100%;
    height: 1.28rem;
    background-color: #1c1c20;
}
header h1 img {
     100%;
    height: 2.8rem;
}

section {
    padding: 0 0.4rem;
    font-size: 0;
    font-family: 'Microsoft YaHei';
}
.plate {
    height: 1.1rem;
    margin-top: -0.4rem;
    overflow: hidden;
}
.plate ul {
    height: 1.1rem;
    display: flex;
    justify-content: center;
}
.plate li {
     0.76rem;
    height: 1.06rem;
    line-height: 1.06rem;
    border: 0.02rem solid #eee;
    margin-right: -0.02rem;
    background-color: #fff;
    font-size: 0.36rem;
    text-align: center;
}
.plate .active {
    border: 0.02rem solid #1aad19;
    z-index: 99;
}
/* 新能源车牌号 */
/* .plate li:nth-last-child(1) {
    font-size: 0.36rem;
    height: 1.06rem;
} */
.plate li .new {
    color: #888;
    /* display: none; */
}
.plate li:nth-last-child(1) span {
    display: block;
     0.26rem;
    height: 0.26rem;
    line-height: 0.2rem;
    font-size: 0.2rem;
    border: 0.01rem solid #888;
    border-radius: 50%;
    margin: 0.24rem auto 0;
}
.plate li:nth-last-child(1) i {
    display: block;
    font-size: 0.2rem;
    line-height: 0.4rem;
    margin-bottom: 0.2rem;
}
.plate li:nth-child(2) {
    margin-right: 0.4rem;
}

footer {
     100%;
    font-size: 0;
    font-family: 'Microsoft YaHei';
}
/* 键盘 */
.keyboard {
    /* height: 5.4rem; */
    background-color: #eceef1;
    position: absolute;
    bottom: 0;
    /* display: none; */
}
.keyboard .shut {
    height: 0.54rem;
    line-height: 0.54rem;
    text-align: right;
    padding: 0 0.16rem;
    font-size: 0.28rem;
    background-color: #f9f9f9;
    color: #333;
    border-bottom: 0.01rem solid #ddd;
    border-top: 0.01rem solid #eee;
}
.keyboard ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.16rem 0.08rem 0;
}
.keyboard li {
    /*  0.66rem; */
     9%;
    height: 0.96rem;
    line-height: 0.96rem;
    text-align: center;
    border-radius: 0.16rem;
    background-color: #fff;
    font-size: 0.32rem;
    color: #333;
    margin: 0 0.08rem 0.16rem 0;
    box-shadow: 0 0.04rem 0 #aaa;
}
.keyboard li:nth-child(10n) {
    margin-right: 0;
}
.keyboard li:nth-last-child(1) {
     1.04rem;
}

/* 地区简称的键盘 */
.area {
     100%;
    background-color: #eceef1;
    position: absolute;
    bottom: 0;
    display: none;
}
.area .shut {
    height: 0.54rem;
    line-height: 0.54rem;
    text-align: right;
    padding: 0 0.16rem;
    font-size: 0.28rem;
    background-color: #f9f9f9;
    color: #333;
    border-bottom: 0.01rem solid #ddd;
    border-top: 0.01rem solid #eee;
}
.area ul {
    padding: 0.16rem 0.08rem 0;
}
.area .area-one, .area .area-tow, .area .area-three, .area .area-four {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.area li {
    /*  0.66rem; */
     9%;
    height: 0.96rem;
    line-height: 0.96rem;
    text-align: center;
    border-radius: 0.16rem;
    background-color: #fff;
    font-size: 0.32rem;
    color: #333;
    margin: 0 0.08rem 0.16rem 0;
    box-shadow: 0 0.04rem 0 #aaa;
}
.area li:nth-child(10n) {
    margin-right: 0;
}
/* .area .area-four li:nth-last-child(1) {
     1.04rem;
} */

/* 手机屏幕小于370px的屏幕 */
@media screen and ( min- 450px ) {
    .keyboard li, .area li {
         0.66rem;
    }
}
/* 手机屏幕小于370px的屏幕 */
@media screen and ( max- 370px ) {
    .keyboard li, .area li {
        /*  0.54rem; */
         8%;
        height: 0.8rem;
        line-height: 0.8rem;
    }
    .plate li:nth-child(2) {
        margin-right: 0.1rem;
    }
    .plate li {
         0.66rem;
    }
    .plate li:nth-last-child(1) span {
        display: block;
        line-height: 0.2rem;
        margin: 0.1rem auto 0;
    }
    .plate li:nth-last-child(1) i {
        display: block;
        font-size: 0.2rem;
        line-height: 0.32rem;
        /* margin-bottom: 0.2rem; */
    }
}

/* 查询缴费 */
section .binding {
     100%;
    height: 0.8rem;
    line-height: 0.8rem;
    margin-top: 1.04rem;
    text-align: center;
    font-size: 0.40rem;
    color: #fff;
    border-radius: 0.16rem;
    background-color: #1aad19;
    /* opacity: 0.5; */
}

/* 不足15分钟 */
section .plate-not {
    font-size: 0.32rem;
    line-height: 1.6rem;
    text-align: center;
    color: #888;
}

/* 弹出框背景变灰色 */
.poplayer3 {
     100%;
    height: 100%;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: #333;
    -moz-opacity: 0.6;
    opacity: 0.6;
    filter: alpha(opacity=60);
    display: none;
}
/*  缴费详情 */
.detail3 {
     5.42rem;
    height: 7.68rem;
    background-color: #fff;
    color: #333;
    border-radius: 0.16rem;
    left: 50%;
    top: 50%;
    margin-left: -2.95rem;
    margin-top: -3.68rem;
    position: fixed;
    z-index: 100;
    display: none;
    padding: 0 0.24rem;
}
.detail3 strong {
     0.56rem;
    height: 0.56rem;
    line-height: 0.56rem;
    border: 0.01rem solid #e64340;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
    font-size: 0.32rem;
    color: #e64340;
    text-align: center;
}
.detail3 h3 {
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.48rem;
}
/* 缴费信息 */
.detail3 ul {
    margin: 0.8rem 0.24rem 0 0.24rem;
    border-bottom: 0.01rem solid #ccc;
    padding-bottom: 0.48rem;
}
.detail3 li span {
    font-size: 0.28rem;
    line-height: 0.48rem;
    color: #666;
}
.detail3 li i {
    font-size: 0.28rem;
    line-height: 0.48rem;
    margin-left: 1.2rem;
}
.detail3 .wechat {
     100%;
    height: 0.8rem;
    line-height: 0.8rem;
    margin-top: 0.8rem;
    text-align: center;
    font-size: 0.40rem;
    color: #fff;
    border-radius: 0.16rem;
    background-color: #1aad19;
    /* opacity: 0.5; */
}
.detail3 .alipay {
     100%;
    height: 0.8rem;
    line-height: 0.8rem;
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.40rem;
    color: #fff;
    border-radius: 0.16rem;
    background-color: #108ee9;
    /* opacity: 0.5; */
}

/* 缴费成功 */
.payment {
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0.16rem;
    margin-top: 0.24rem;
    padding: 0.24rem;
}
/* 缴费信息 */
.payment ul {
    margin: 0.48rem 0.4rem 0 0.4rem;
    border-bottom: 0.01rem solid #ccc;
    padding-bottom: 0.48rem;
}
.payment h4 {
    font-size: 0.32rem;
    line-height: 0.8rem;
    color: #666;
}
.payment h4 em {
    font-style: normal;
    font-size: 0.4rem;
    color: #e64340;
}
.payment strong {
    font-size: 0.28rem;
    line-height: 0.48rem;
    color: #e64340;
}
.payment li span {
    font-size: 0.28rem;
    line-height: 0.48rem;
    color: #666;
}
.payment li i {
    font-size: 0.28rem;
    line-height: 0.48rem;
    margin-left: 0.8rem;
}
.payment p {
    /* text-align: right; */
    font-size: 0.24rem;
    line-height: 0.48rem;
    color: #aaa;
}

    　　3. javascript

    window.onload = function () {

    // 初始化rem单位
    (function () {
        document.addEventListener('DOMContentLoaded', function () {
            function htmlsize () {
                let html = document.documentElement;
                let windowWidth = html.clientWidth;
                if (windowWidth <= 750) {
                    html.style.fontsize = windowWidth / 7.5 + 'px';
                    // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
                } else {
                    html.style.fontSize = 100 + 'px';
                }
            }
            htmlsize();
            window.onresize = function () {
                htmlsize()
            }
        }, false)
    })();

    
    (function ($) {
        // 获取键盘上的关闭按钮
        var oShut = $("#shut");
        // 获取键盘的id
        var oShutkey = $("#shutkey");
        // 获取车牌框切换的id
        var oPlate = $("#plate");
        // 获取号码牌的li
        var oPli = $("#plate li");
        // 获取数字拼音软键盘的每个值
        var oOli = $("#keyboard li");
        // 获取地名简称软键盘的每个值
        var oOlia = $("#keyboarda li");
        // 获取地方简称键盘的id
        var oArea = $("#area");
        // 获取地方简称的关闭按钮
        var oShuta = $("#shuta");
        // 获取查询缴费的id
        var oBinding = $("#binding");
        // 获取显示车牌号的id
        var oPlateNum = $("#platenum");
        // 获取弹出框的id
        var oDetail3 = $("#detail3");
        // 获取小红叉的id
        var oCancelParking3 = $("#CancelParking3");
        // 获取背景灰色的id
        var oPoplayer3 = $("#poplayer3");

        // 点击关闭，关闭键盘
        oShut.click(function () {
            oShutkey.slideUp(100);
        });
        // 点击关闭，关闭地名键盘
        oShuta.click(function () {
            oArea.slideUp(100);
        });

        // 切换车牌号码框的函数
        (function () {
            // 定义车牌框变量
            var oPok = 2;
            // 定义键盘变量
            var oOlok;

            // 给车牌框绑定点击事件
            oPli.bind("click", function () {
                // 获取车牌框里面的索引值
                var index = $(this).index();
                // 点击哪个框就给哪个框添加绿色框，并去掉其他绿色框
                $(this).addClass("active").siblings().removeClass("active");
                oPok = index;
                // 隐藏新能源信息
                function onew() {
                    $(".new").show(50);
                };
                // 隐藏地名简称键盘
                function oarea() {
                    oArea.slideUp(200);
                };
                // 显示数字拼音键盘
                function oshutkey() {
                    oShutkey.slideDown(200);
                };

                // 当点击第一个的时候，调出地名简称键盘
                if ( oPok === 0 ) {
                    onew();
                    oArea.slideDown(200);
                    oShutkey.slideUp(200);
                // 当点击最后一个的时候隐藏自己的innerText值
                } else if ( oPok === 7 ) {
                    $(".new").hide(100);
                    oarea()
                    oshutkey()
                // 当点击第二个的时候，弹出数字拼音键盘
                } else if ( oPok === 1 ) {
                    onew();
                    oarea()
                    oshutkey()
                // 当点击第7个的时候全部显示
                } else if(oPok === 6) {
                    onew();
                    oarea()
                    oshutkey()
                // 当点击其他车牌框的时候调出数字拼音键盘
                } else {
                    onew();
                    oarea()
                    oshutkey()
                };
            });
            
            // 给数字拼音键盘绑定点击事件
            oOli.bind("click", function () {
                // 获取键盘的索引
                var index = $(this).index();
                oOlok = index;
                // 绿色框加到下一个
                function opli() {
                    oPli.eq(oPok).addClass("active").siblings().removeClass("active");
                };
                // 点击删除按钮，往后回删内容
                if ( oOlok === 38 ) {
                    oPli.eq(oPok).html("");
                    oPok --;
                    opli();
                    // 当回删到第一个的时候隐藏数字拼音键盘，显示地名简称键盘
                    if ( oPok === 0 ) {
                        oArea.slideDown(200);
                        oShutkey.slideUp(200);
                        // 
                    } else if ( oPok < 8 ) {
                        oPli.eq(7).html('<div class="new"><span>+</span><i>新能源</i></div>');
                    };
                }else {
                    // 点击数字拼音键盘替换获取车牌框索引值的值
                    oPli.eq(oPok).html(this.innerText);
                    // 每点击一次增加一次索引
                    oPok ++;
                    // 每点击一次绿色框跳转到下一个
                    opli();
                }
                // 当绿色框达到第7个的时候隐藏绿色框，并隐藏键盘
                if (oPok > 6) {
                    oShutkey.slideUp(200);
                    oPli.removeClass("active");
                };
            });

            // 给地名键盘绑定点击事件
            oOlia.bind("click", function () {
                // 点击简称键盘获取车牌索引值的值
                oPli.eq(oPok).html(this.innerText);
                // 点击一次增加一次索引
                oPok ++;
                if ( oPok === 1 ) {
                    oArea.slideUp(200);
                    oShutkey.slideDown(200);
                };
                // 点击一次绿色框跳转到下一个
                oPli.eq(oPok).addClass("active").siblings().removeClass("active");
            });

            // 点击查询缴费弹出框，并获取输入的车牌号
            oBinding.click(function () {
                var oStr;
                // 判断车牌最后一位长度是否大于1
                if ( oPli.eq(7).text().length > 1 ) {
                    // 如果大于1，显示前7位
                    oStr = $("#plate li:lt(7)").text();
                    oPlateNum.text(oStr);
                } else {
                    // 最后一位输入车牌就显示8位
                    oStr = $("#plate li:lt(8)").text();
                    oPlateNum.text(oStr);
                };
                // 显示弹框
                oDetail3.show(100);
                // 显示背景层
                oPoplayer3.show();
            });
        })();

        // 点击小红叉隐藏页面
        oCancelParking3.click(function () {
            oDetail3.hide(100);
            oPoplayer3.hide();
        });
    })(jQuery); 
}

    　　
  • 相关阅读:
    显示/隐藏Mac下的隐藏文件
    遍历指定文件下所有文件，删除指定后缀文件
    ssh公钥
    设置状态栏(statusbar)的样式
    Silverlight上传下载三种方法解析（三）
    Silverlight上传下载三种方式解析（二）
    Silverlight 上传下载之三种方式解析
    一个简单的存储过程代码生成器
    .net 程序发生了一个不可捕获的异常
    n取的r的组合数问题
  • 原文地址：https://www.cnblogs.com/xhrr/p/11557020.html
Copyright © 2011-2022 走看看