最近闲来无事,突然想写一篇博文,但是又不知道该写些什么好,只好献上丑陋的代码一篇。
随着移动设备的兴起,很多的网页开始进入响应式布局的潮流中,好像现在的页面,你不说是响应式的,都不好意思跟别人提及。响应式布局的佼佼者bootstrap为我们这些前端的码农们提供了很大的便利,确实bootstrap也很优秀,但是一旦大多数的人使用,我便觉得索然无味。不多说,直接进入主题。
接下来是一页完整的关于车牌录入的代码,有人说直接用input框不就行了吗?如果真是这样,那我们这些前端码农们也太low了点儿了。
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> -->
<link rel="stylesheet" href="./frozenui/css/frozen.css">
<link rel="stylesheet" href="css/style.css"/>
该进来的包还是得进来的,jQuery、frozen一样也不能少,接下来是HTML代码
<div id="mask"></div> <div data-role="page" id="home"> <div data-role="content"> <div data-role="fieldcontain" class="new-form-ui"> <br/> <div align="center" id="memo"></div> <!-- <div class="ui-form-item"> <input id="cars" placeholder="请输入车牌号" value="" readonly type="text" οnclick="$showKeyboard()"/> </div> --> </div> <section class="ui-input-wrap ui-border-t" style="margin-top:64px;margin-bottom:64px"> <div class="ui-input ui-border-radius"> <input id="cars" type="text" name="" value="" placeholder="请输入车牌号" οnclick="$showKeyboard()" readonly> </div> </section> <div class="ui-btn-wrap"> <button class="ui-btn-lg ui-btn-primary" οnclick="register()"> 登记 </button> </div> </div> </div> <!-- S 自定义键盘 --> <div class="keyboard" id="keyboard-0"> <div class="layer-box" οnclick="hiddenKeyboard()"></div> <div class="keyboard-box"> <!-- 车牌 --> <div class="keyboard-header"> <div class="car-num" id="car-num-0"> <a href="javascript:;" class="key-active">川</a> <a href="javascript:;">A</a> <a href="javascript:;">0</a> <a href="javascript:;">0</a> <a href="javascript:;">0</a> <a href="javascript:;">0</a> <a href="javascript:;">0</a> </div> <div class="btns-group" style="float:right"> <!-- <a href="javascript:;" class="cancel" οnclick="hiddenKeyboard()">取消</a> --> <div class="cancel"></div> <a href="javascript:;" class="ok" οnclick="setCarNum()">确定</a> </div> </div> <!-- 键盘 --> <div class="keyboard-body"> <!-- 省、直辖市 --> <div class="keyboard-content province"> <a href="javascript:;">京</a> <a href="javascript:;">津</a> <a href="javascript:;">冀</a> <a href="javascript:;">鲁</a> <a href="javascript:;">蒙</a> <a href="javascript:;">辽</a> <a href="javascript:;">吉</a> <a href="javascript:;">黑</a> <a href="javascript:;">沪</a> <a href="javascript:;">苏</a> <a href="javascript:;">浙</a> <a href="javascript:;">皖</a> <a href="javascript:;">闽</a> <a href="javascript:;">赣</a> <a href="javascript:;">豫</a> <a href="javascript:;">鄂</a> <a href="javascript:;">湘</a> <a href="javascript:;">粤</a> <a href="javascript:;">桂</a> <a href="javascript:;">渝</a> <a href="javascript:;">川</a> <a href="javascript:;">贵</a> <a href="javascript:;">云</a> <a href="javascript:;">藏</a> <a href="javascript:;">陕</a> <a href="javascript:;">甘</a> <a href="javascript:;">宁</a> <a href="javascript:;">晋</a> <a href="javascript:;">青</a> <a href="javascript:;">琼</a> <a href="javascript:;">新</a> <a href="javascript:;">港</a> <a href="javascript:;">澳</a> <a href="javascript:;">台</a> </div> <!-- 字母 --> <div class="keyboard-content letter letters" style="display: none;"> <a href="javascript:;">Q</a> <a href="javascript:;">W</a> <a href="javascript:;">E</a> <a href="javascript:;">E</a> <a href="javascript:;">R</a> <a href="javascript:;">T</a> <a href="javascript:;">Y</a> <a href="javascript:;">U</a> <a href="javascript:;">I</a> <a href="javascript:;">O</a> <a href="javascript:;">P</a> <a href="javascript:;">A</a> <a href="javascript:;">S</a> <a href="javascript:;">D</a> <a href="javascript:;">F</a> <a href="javascript:;">G</a> <a href="javascript:;">H</a> <a href="javascript:;">J</a> <a href="javascript:;">K</a> <a href="javascript:;">L</a> <a href="javascript:;">Z</a> <a href="javascript:;">X</a> <a href="javascript:;">C</a> <a href="javascript:;">V</a> <a href="javascript:;">B</a> <a href="javascript:;">N</a> <a href="javascript:;">M</a> </div> <!-- 字母、数字 --> <div class="keyboard-content letter number" style="display: none;"> <a href="javascript:;">0</a> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">4</a> <a href="javascript:;">5</a> <a href="javascript:;">6</a> <a href="javascript:;">7</a> <a href="javascript:;">8</a> <a href="javascript:;">9</a> <a href="javascript:;">Q</a> <a href="javascript:;">W</a> <a href="javascript:;">E</a> <a href="javascript:;">E</a> <a href="javascript:;">R</a> <a href="javascript:;">T</a> <a href="javascript:;">Y</a> <a href="javascript:;">U</a> <a href="javascript:;">I</a> <a href="javascript:;">O</a> <a href="javascript:;">P</a> <a href="javascript:;">A</a> <a href="javascript:;">S</a> <a href="javascript:;">D</a> <a href="javascript:;">F</a> <a href="javascript:;">G</a> <a href="javascript:;">H</a> <a href="javascript:;">J</a> <a href="javascript:;">K</a> <a href="javascript:;">L</a> <a href="javascript:;">Z</a> <a href="javascript:;">X</a> <a href="javascript:;">C</a> <a href="javascript:;">V</a> <a href="javascript:;">B</a>
<a href="javascript:;">M</a> </div> </div> </div></div><a href="javascript:;">N</a>
重点在于车牌的位数比较多,有几个特别注意的地方是,车牌中不能含有字母I和字母O,至于为什么,这个也很好理解,I和数字1太像,0和数字0太像,至于还有一些
领事馆的车牌的话,恐怕是有心无力了。怎么样把用户点击的字符放到我们需要的地方去呢?这就要依靠我们强大的JavaScript了。
<script type="text/javascript"> // var getval = thisURL.split('?')[1]; var user_id = getUrlParam("userId"); var weixinCode = getUrlParam('code'); var carRegisterBoolean = false; //根据openid获得 可以登记车辆的个数。 function register() { var msg = "您确认要登记该车牌吗!"; if (confirm(msg) == true) { var cars = document.getElementById("cars").value; // 車牌號 if (cars.length == 0 || cars == "") { alert("车牌号不能为空") } else { console.log(cars, user_id + 111111111111) $.ajax({ url: '/yunpasswx/api/cars/bindCar', data: JSON.stringify({ plate_number: cars, user_id: user_id }), type: 'POST', dataType: "json", success: function (t) { console.log(t) if (t.code == 1) { //登记成功 alert("登记成功"); window.location.href = "cars_list.html?userId=" + user_id; } else { alert("登记失败"); } } }); } } else { return false; } } ; jQuery(function () { if (weixinCode) { getOpenid(weixinCode, 2); } else { openID = getUrlParam('openID'); } // queryCarRegisterNum(); var carid = jQuery('#cars'), // 车牌值 car_num_0 = jQuery('#car-num-0'), // 车牌号组成按钮 province = jQuery('#keyboard-0 .keyboard-content.province'), // 省、直辖市 letter = jQuery('#keyboard-0 .keyboard-content.letter.letters'), // 省、直辖市 _number = jQuery('#keyboard-0 .keyboard-content.letter.number'); // 省、直辖市 // 选择省、直辖市 car_num_0.children('a').eq(0).click(function () { car_num_0.children('a').removeClass('key-active').eq(0).addClass('key-active'); jQuery('#keyboard-0 .keyboard-content').hide().eq(0).show(); }); province.children('a').click(function () { var that = jQuery(this); car_num_0.children('a').eq(0).html(that.text()).removeClass('key-active').next().addClass('key-active'); jQuery('#keyboard-0 .keyboard-content').hide().eq(1).show(); }); // 选择区域字母 car_num_0.children('a').eq(1).click(function () { car_num_0.children('a').removeClass('key-active').eq(1).addClass('key-active'); jQuery('#keyboard-0 .keyboard-content').hide().eq(1).show(); }); letter.children('a').click(function () { var that = jQuery(this); car_num_0.children('a').eq(1).html(that.text()).removeClass('key-active').next().addClass('key-active'); jQuery('#keyboard-0 .keyboard-content').hide().eq(2).show(); }); // 选择字母数字 jQuery.each(car_num_0.children('a'), function (i, item) { if (i > 1) { var that = jQuery(item); that.click(function () { car_num_0.children('a').removeClass('key-active'); that.addClass('key-active'); jQuery('#keyboard-0 .keyboard-content').hide().eq(2).show(); }); } }); _number.children('a').click(function () { var that = jQuery(this); car_num_0.children('a.key-active').html(that.text()).removeClass('key-active').next().addClass('key-active'); jQuery('#keyboard-0 .keyboard-content').hide().eq(2).show(); }); }); // 显示键盘 function $showKeyboard() { var carNum = jQuery('#cars').val(); // 初始化键盘车牌值 if (carNum) { var arrs = carNum.split(''); jQuery.each(jQuery('#car-num-0').children('a'), function (i, item) { jQuery(this).text(arrs[i]); }); } jQuery('#keyboard-0').show(); jQuery('#car-num-0').children('a').removeClass('key-active').eq(0).addClass('key-active'); jQuery('#mask').addClass('mask opacity'); jQuery('#keyboard-0 .keyboard-content').hide().eq(0).show(); } // 设置车牌号 function setCarNum() { var carNum = ''; jQuery.each(jQuery('#car-num-0').children('a'), function (i, item) { carNum += jQuery(this).text().trim(); }); jQuery('#cars').val(carNum); jQuery('#keyboard-0').hide(); jQuery('#mask').removeClass('mask opacity'); } //隐藏键盘 function hiddenKeyboard() { jQuery('#keyboard-0').hide(); jQuery('#mask').removeClass('mask opacity'); } </script>
好了,大功告成,一个响应式的车牌号录入页面就基本完成了,如果各位看官觉得还不错的话,可以拿回去试试。