html5车牌效果,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:”黑体”;
}
确定
确定
“豫”,”川”,”渝”,”辽”,”吉”,”黑”,”皖”,”鄂”,
“津”,”贵”,”云”,”桂”,”琼”,”青”,”新”,”藏”,
“蒙”,”宁”,”甘”,”陕”,”闽”,”赣”,”湘”);
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车牌号输入键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
html5车牌效果,html中车牌号省份简称输入键盘的示例代码相关推荐
- html5车牌效果,快速输入车牌号效果
HtmlCssJs 点击下面任意方框 京 沪 浙 苏 粤 鲁 晋 冀 豫 川 渝 辽 吉 黑 皖 鄂 津 贵 云 桂 琼 青 新 藏 蒙 宁 甘 陕 闽 赣 清空 关闭 1 2 3 4 5 6 7 8 ...
- HTML5垃圾桶效果,Html轻松使用拖拽实现垃圾桶,代码带注释,包你能看懂
效果 参考教程: W3school: 菜鸟教程: 关键知识点: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondra ...
- html5画布funcition,2020前端基础知识学习第一节(示例代码)
一.选择题 1. 浏览器端的存储技术有哪些() A.cookie B.localStorage C.session D.userData 答案:A B D 分析:cookie通常用于存储用户等登录信息 ...
- html5经纬度 ios,iOS 如何根据经纬度来定位位置(示例代码)
/** * 初始化一个经纬度结构体 */ CLLocationCoordinate2D center = {[latitudeTF.text floatValue],[longitudeTF.tex ...
- html5游戏开发马赛克对比,canvas实现图片马赛克的示例代码
1. 原生canvas实现用到的API 1) getContext(contextID) ---返回一个用于在画布上绘图的环境 Canvas.getContext('2d') // 返回一个 Canv ...
- Android自定义一个省份简称键盘
hello啊各位老铁,这篇文章我们重新回到Android当中的自定义View,其实最近一直在搞Flutter,初步想法是,把Flutter当中的基础组件先封装一遍,然后接着各个工具类,列表,网络,统统 ...
- html炫酷在线,小伙伴们都会惊呆的10个超炫的HTML5+CSS3效果作品
在CodePen(CodePen 是一个在线的 HTML.CSS 和 JavaScript 代码编辑器,能够编写代码并即时预览效果)上看到许多非常炫的html+css3效果示例.这些炫酷的技术真是让我 ...
- 百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家HTML5源码和解释,也给大家做个参考.对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧 本文介绍了Html5百叶 ...
- 8个前沿的 HTML5 CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
最新文章
- MySQL 加锁处理分析 ---非常牛逼
- 【C++ 语言】引用 ( 引用简介 | 指针常量 | 常量指针 | 常引用 | 引用参数 | 引用 指针 对比 )
- rtti获取类的字段和属性和方法
- 我们这旮都是黑社会[转]
- spring jdbctemplate调用存储过程,返回list对象
- PE文件结构详解(六)重定位
- 人生这场牌,怎么打才是最优解?
- Codeforces Round 212 Div 2 报告(以前没写完,现在也没心情补了,先就这样吧)
- Unicode 字符编码
- symantec linux版命令,symantec backup exec 2010 linux客户端的配置
- DOS MASM 安装
- Oracle-数据库的备份与恢复
- 华为终端穿戴软件测试,【华为软件测试工程师面试】总共五轮面试外加一个上机的性格测试。-看准网...
- Garbled Circuits介绍 - 3 Yao的混淆电路协议
- 加油卡充值 数据接口
- 宫崎骏最新动画——哈尔的移动城堡
- 小习题:猴子吃桃问题
- 东南亚电商平台 | Shopee 虾皮 入驻流程全解析
- 自动化运维之自动化监控
- Android开发-基本概念小整理(二)为了面试的小伙伴们所准备~~
热门文章
- html加载页面转圈圈怎么打,js实现等待加载“转圈圈”效果
- 树莓派屏幕显示No Signal
- asp.net打开新标签页
- 移动端是如何做适配的?
- Win10 yolov5 6.0版本使用tensorrtx部署tensorRT
- MAKEFILE【4】-Makefile中的wildcard用法
- Go sync.Pool 浅析
- 计算机在英语中有哪些运用,计算机在英语教学中的运用
- PHP 把ofd格式文件转PDF,打开OFD格式文件及将OFD格式文件转换成PDF文件
- 【论文精读1】CSDI: Conditional Score-based Diffusion Models for Probabilistic Time Series Imputation