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); 
}

查看全文

相关阅读:
ubuntu下文件安装与卸载
 webkit中的JavaScriptCore部分
 ubuntu 显示文件夹中的隐藏文件
 C语言中的fscanf函数
 test
Use SandCastle to generate help document automatically.
XElement Getting OuterXML and InnerXML
XUACompatible meta 用法
 Adobe Dreamweaver CS5.5 中文版下载注册码
 The Difference Between jQuery’s .bind(), .live(), and .delegate()

原文地址：https://www.cnblogs.com/xhrr/p/11557020.html