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");// 獲取鍵盤的idvar oShutkey = $("#shutkey");// 獲取車牌框切換的idvar oPlate = $("#plate");// 獲取號碼牌的livar oPli = $("#plate li");// 獲取數字拼音軟鍵盤的每個值var oOli = $("#keyboard li");// 獲取地名簡稱軟鍵盤的每個值var oOlia = $("#keyboarda li");// 獲取地方簡稱鍵盤的idvar oArea = $("#area");// 獲取地方簡稱的關閉按鈕var oShuta = $("#shuta");// 獲取查詢繳費的idvar oBinding = $("#binding");// 獲取顯示車牌號的idvar oPlateNum = $("#platenum");// 獲取彈出框的idvar oDetail3 = $("#detail3");// 獲取小紅叉的idvar oCancelParking3 = $("#CancelParking3");// 獲取背景灰色的idvar 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;// 判斷車牌最后一位長度是否大于1if ( 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); }
轉載于:https://www.cnblogs.com/xhrr/p/11557020.html
總結
- 上一篇： 3 OpenCV 车牌识别-2 颜色定位
- 下一篇： UTL_FILE