响应式的车牌登记页面

最近闲来无事，突然想写一篇博文，但是又不知道该写些什么好，只好献上丑陋的代码一篇。

随着移动设备的兴起，很多的网页开始进入响应式布局的潮流中，好像现在的页面，你不说是响应式的，都不好意思跟别人提及。响应式布局的佼佼者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:;">N</a>

 <a href="javascript:;">M</a> </div> </div> </div></div>

 重点在于车牌的位数比较多，有几个特别注意的地方是，车牌中不能含有字母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>


    好了，大功告成，一个响应式的车牌号录入页面就基本完成了，如果各位看官觉得还不错的话，可以拿回去试试。

响应式的车牌登记页面相关推荐

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新
当我们给对象或者数组添加一个属性的时候,会发现通过打印,可以在控制台看见数据已经更新,但是页面却没有成功渲染上. <template><div class="main-la ...
HTML5 响应式网页设计之页面美化（一.响应式布局）
1.响应式设计的优点和缺点 2.视口的概念 1.视口就是浏览器所显示网页的那部分区域 2.meta标签设置视口,meta标签的作用就是让当前视口的宽度等于设备的宽度 /*通过<meta name ...
HTML5 响应式网页设计之页面美化（三.弹性布局）
1.弹性布局弹性布局是由弹性布局的容器和弹性布局的伸缩项目两部分组成任何一个容器都可以指定为 Flex 布局. 注意,设为 Flex 布局以后,子元素的float.clear和vertical-a ...
HTML5 响应式网页设计之页面美化（二.媒体查询）
1.媒体查询媒体查询可以为不同媒介的类型设置不同的样式,大部分媒体特性都接受min和max属性只有当<meta name="viewport">视口标签存在的时候, ...
显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
关于响应式页面的几种处理方法
2021-01-12 我本来还看了一些网页设计的课程,本来想找里面的一部分内容来着,结果怎么也找不到当时的笔记了,唉怪我自己没收好,生气一.使用框架实现响应式做响应式最简单方便的就是用现成的框架或 ...
css响应式页面实现
响应式页面概念部分 1.响应式页面的由来在很久很久以前,我们做的网页只是为了PC端的观看.使用,直到2000年,2.5G手机的出现,人们可以通过手机来访问网络,使得服务商们纷纷做了另一套网页为手机 ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery
网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

响应式的车牌登记页面

响应式的车牌登记页面相关推荐

最新文章

热门文章