碼上歡樂
相關內容    簡體    繁體

h5車牌號輸入鍵盤

本文轉載自   查看原文   2019-09-20 15:39   1888    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-width: 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 {
    width: 100%;
    font-size: 0;
    text-align: center;
    font-family: 'Microsoft YaHei';
}
header .top {
    width: 100%;
    height: 1.28rem;
    background-color: #1c1c20;
}
header h1 img {
    width: 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 {
    width: 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;
    width: 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 {
    width: 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 {
    /* width: 0.66rem; */
    width: 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) {
    width: 1.04rem;
}

/* 地區簡稱的鍵盤 */
.area {
    width: 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 {
    /* width: 0.66rem; */
    width: 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) {
    width: 1.04rem;
} */

/* 手機屏幕小於370px的屏幕 */
@media screen and ( min-width: 450px ) {
    .keyboard li, .area li {
        width: 0.66rem;
    }
}
/* 手機屏幕小於370px的屏幕 */
@media screen and ( max-width: 370px ) {
    .keyboard li, .area li {
        /* width: 0.54rem; */
        width: 8%;
        height: 0.8rem;
        line-height: 0.8rem;
    }
    .plate li:nth-child(2) {
        margin-right: 0.1rem;
    }
    .plate li {
        width: 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 {
    width: 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 {
    width: 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 {
    width: 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 {
    width: 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 {
    width: 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 {
    width: 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); 
}

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 H5 調起車牌號碼鍵盤 微信小程序車牌號碼模擬鍵盤輸入 JQ實現一個個輸入車牌號的效果，並且支持新能源車牌號和特殊車牌。 android仿支付寶輸入車牌號 python的車牌號的檢測 用vue寫的移動端車牌號輸入法 根據車籍地(車牌號碼前2位)獲取地區代碼(城市) 基於vue-cli的車牌號碼專用鍵盤前端工程 基於TensorFlow的車牌號識別系統 隨機生成臨時車牌號
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM