原理是先写出一个按键的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<rows;i++){
for(var j=0;j<columns;j++){
var provinceIds = i*columns+j;
if(provinceIds<provinces.length){
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 += '
‘;
return addHtml;
}
function chooseProvince(province){
/* alert(province+”======”+provinces[7]); */
document.getElementById(“id_province”).value=province;
$(“#id_keyboard_province”).hide();
}
本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/html/13507.html
