html 车牌号输入代码,html中车牌号省份简称输入键盘的示例代码
这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
原理是先写出一个按键的div,然后再根据屏幕的大小去自动适应生成键盘,效果如下图:
具体实现代码如下,就不细说了。
/* *{
font-family:"黑体";
} */
.content{
width:265px;
height:353px;
position:absolute;
top:50%;
left:50%;
height:50%;
margin:-177px 0 0 -132px;
}
.label_province{
position:absolute;
top:6px;
left:10px;
}
.input_province{
position:absolute;
text-align:center;
width:26px;
left:1px;
top:6px;
border:none;
outline:0;
font-family:"黑体";
}
.input_font{
font-size:18px;
color:#333333;
}
.input_font_plate{
font-size:14px;
color:#333333;
}
.input_platenumber_base{
position:absolute;
text-align:center;
width:34px;
top:13px;
border:none;
outline:0;
}
.input_city{
left:44px;
}
.label_platenumber{
font-size:14px;
color:#999;
width:265px;
text-align:center;
margin-top:29px;
border:0;
outline:0;
}
.input_park{
font-size:14px;
color:#666;
width:265px;
text-align:center;
border:0;
outline:0;
}
.label_btntext_confirm{
position:absolute;
top:12px;
font-size:16px;
width:214px;
left:0;
}
.label_btn_text{
text-align:center;
color:#FFF;
/* font-weight:bold; */
}
.key_province{
font-size:17px;
position:absolute;
left:2.5px;
top:8px;
border:0;
width:28px;
text-align:center;
font-family:"黑体";
}
确定
确定
var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀",
"豫","川","渝","辽","吉","黑","皖","鄂",
"津","贵","云","桂","琼","青","新","藏",
"蒙","宁","甘","陕","闽","赣","湘");
function provinceSelect(){
showProvince();
}
function parkSelect(){
alert("选择停车场");
}
function confirm(){
alert("确定");
}
function showProvince(){
var screenWidth=window.screen.width;
//求出列数,向下取整
var columns = Math.floor((screenWidth - 9)/42);
//求出行数,向上取整
var rows = Math.ceil(31/columns);
//算出按键背景的高度,为每个按键的高度+间隔+上下边距,48为每个按键的高度+距下一个按键的距离
var key_bg_height= rows*48+16;
var x_space = (screenWidth - 9 - 42*columns)/(columns);
var start_x = 9+x_space;
var start_y = 12;
var keyboard_province = document.getElementById("id_keyboard_province");
keyboard_province.style.position="fixed";
keyboard_province.style.top= (window.screen.height-key_bg_height)+"px";
keyboard_province.style.left=0;
keyboard_province.style.backgroundColor="#f2f2f2";
keyboard_province.style.width="100%";
keyboard_province.style.height=key_bg_height+"px";
//keyboard_province.style.display="block";
keyboard_province.innerHTML = '';
for(var i=0;i
for(var j=0;j
var provinceIds = i*columns+j;
if(provinceIds
var x = 9+(j+1)*x_space+j*42;
var y = 12+i*48;
/* var addHtml = addKeyProvince(x,y,provinceIds);
alert(addHtml); */
$("#id_keyboard_province").append(addKeyProvince(x,y,provinceIds));
}
else{
keyboard_province.style.display="block";
return;
}
}
}
}
function addKeyProvince(x,y,provinceIds){
var addHtml = '
addHtml += '';
addHtml += '';
addHtml += '
';
return addHtml;
}
function chooseProvince(province){
/* alert(province+"======"+provinces[7]); */
document.getElementById("id_province").value=province;
$("#id_keyboard_province").hide();
}
到此这篇关于html中车牌号省份简称输入键盘的示例代码的文章就介绍到这了,更多相关html车牌号输入键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
来源:脚本之家
链接:https://www.jb51.net/web/731451.html
申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!
html 车牌号输入代码,html中车牌号省份简称输入键盘的示例代码相关推荐
- html5车牌效果,html中车牌号省份简称输入键盘的示例代码
这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧原理是先写出一个按键的 ...
- python代码翻译-用python实现百度翻译的示例代码
用python实现百度翻译,分享给大家,具体如下: 首先,需要简单的了解一下爬虫,尽可能简单快速的上手,其次,需要了解的是百度的API的接口,搞定这个之后,最后,按照官方给出的demo,然后写自己的一 ...
- python基础代码事例-数据科学Python基础(附示例代码和练习题目)
翻译 | AI科技大本营 参与 | 王珂凝 审校 | reason_W [AI科技大本营导读]Python的强大和灵活相信已经毋庸置疑了.那么数据科学中,我们又需要掌握哪些基础知识点才能满足使用需求呢 ...
- python代码翻译器-用python实现百度翻译的示例代码
用python实现百度翻译,分享给大家,具体如下: 首先,需要简单的了解一下爬虫,尽可能简单快速的上手,其次,需要了解的是百度的API的接口,搞定这个之后,最后,按照官方给出的demo,然后写自己的一 ...
- 父爱动画代码python_pygame用blit()实现动画效果的示例代码
pygame的的实现动画的方法有很多,但是都是围绕着表面进行的,也就是说实现动画的方式不同,但是本质其实都是对表面的不同处理方式而已. 原理其实很简单,有点像我们做地铁的时候隧道里的广告一样.我们设置 ...
- python简单目标检测代码_Python Opencv实现单目标检测的示例代码
一 简介 目标检测即为在图像中找到自己感兴趣的部分,将其分割出来进行下一步操作,可避免背景的干扰.以下介绍几种基于opencv的单目标检测算法,算法总体思想先尽量将目标区域的像素值全置为1,背景区域全 ...
- udp服务器php代码例子,Java客户端PHP服务器UDP穿孔示例代码
我正在一个需要pe2p服务器的项目中工作,但是我还没有找到任何Java客户端php服务器示例代码.我了解udp打孔工作原理的概念,但是我无法在代码中工作. 我尝试过的 TheSocket.java p ...
- c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 效果图 示例代码: 扇形绘制 } .sx1{ position: absolut ...
- python修改自己的代码_python修改微信和支付宝步数的示例代码
项目意义 如果你想在支付宝蚂蚁森林收集很多能量种树,为环境绿化出一份力量,又或者是想每天称霸微信运动排行榜装逼,却不想出门走路,那么该python脚本可以帮你实现. 实现方法 手机安装第三方软件乐心健 ...
- java无线投屏代码,Android PC投屏功能实现的示例代码
本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过Web ...
最新文章
- python奇数和_请问python如何判断奇偶数?
- 常见的基于node.js的web框架
- 1035. 插入与归并(25)
- Cocos2D-x(3)——动作类备忘
- [深度学习-实践]CycleGAN的入门例子-Tensorflow2.1-keras
- vue双向绑定时添加.sync不起作用的原因
- redis集群出现JedisNoReachableClusterNodeException异常(No reachable node in cluster)
- C#之ActionBlock异步关闭死锁
- win10的计算机 桌面图标不见了怎么办,Win10我的电脑怎么放在桌面?Win10此电脑图标不见了的解决方法...
- SparkStreaming概述
- 跟踪fork: Resource temporarily unavailable的原因
- 计算机领域获奖感言,计算机编程比赛获奖感言
- 介绍 GBase 8c产品架构
- 著名平面设计师有哪些?你想成为他们嘛?
- 圣地亚哥大学计算机科学专业,加州大学圣地亚哥分校计算机科学与工程系
- 苹果开发者账号官方翻译篇-团队管理
- 虚拟内存(分页机制)
- 【拓展】编程语言中的“前浪”和“后浪”
- CSS3干货14:自定义页面滚动条
- “微信之父”张小龙年薪3亿,曾独自一人完成7万行代码