自己写的一个数字选择器,但又以下问题望各位帮忙解决
1)弹出层始终在下方,这样可能下方挡住了,我想让其随浏览器高度来定
2)弹出层被select挡住了,如何让其在最上层
3)除选择数字外,也可以输入指定范围的数字,这样需要判断用户输入是否合法,我是单独使用了onblur,感觉有点臃肿,能否直接在setnum中实现输入判断?或者有无其他更好办法?
4)以下弹出层始终是4*5的格子,能否根据总的数字数量来动态设置弹出层大小?
<html>
<title></title
<head>
</head><body>
<form action="" method="get" name="form1" id="form1">
<input type="text" name="nubtxt1" onfocus="setnum(this,document.form1.nubtxt1,0,5)" onblur="valinum(this,document.form1.nubtxt1,0,5)">
<input type="text" name="nubtxt2" onfocus="setnum(this,document.form1.nubtxt2,0,10)" onblur="valinum(this,document.form1.nubtxt2,0,10)">
<input type="text" name="nubtxt3" onfocus="setnum(this,document.form1.nubtxt3,0,12)" onblur="valinum(this,document.form1.nubtxt3,0,12)">
<br>
<select></select>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><input type="text" name="nubtxt4" onfocus="setnum(this,document.form1.nubtxt4,0,12)" onblur="valinum(this,document.form1.nubtxt4,0,12)"></form>
<script language="javascript">
document.writeln('<div id="numLayer" style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">');
document.writeln('<table border="1" cellspacing="1" cellpadding="1" width="100" height="100" bgcolor="#FFFFFF">');
var n = 0;
for (j = 0; j < 4; j++)
{
document.writeln('<tr align="center">');
for (i = 0; i < 5; i++)
{
document.writeln('<td width="20" height="20" id="MJBNum' + n + '" style="font-size:12px" Author="MJB" onclick="numClick(this.innerText)" align="center"></td>');
n++;
}
document.writeln('</tr>');
}
document.writeln('</table>');
document.writeln('</div>');var outObject;
var MJBWNum = new Array(20); //定义写数字的数组
function setnum(tt, obj, xmin, ymax) //主调函数
{
if (arguments.length > 4)
{
alert("对不起!传入本控件的参数太多!");
return ;
}
if (arguments.length == 0)
{
alert("对不起!您没有传回本控件任何参数!");
return ;
}
var dads = document.all.numLayer.style;
var th = tt;
var ttop = tt.offsetTop; //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent)
{
ttop += tt.offsetTop;
tleft += tt.offsetLeft;
}
dads.top = (ttyp == "image") ? ttop + thei: ttop + thei;
dads.left = tleft;
outObject = (arguments.length == 1) ? th : obj;
dads.display = '';
event.returnValue = false;
MJBSetNum(xmin, ymax);
}function numClick(n)
{
if (outObject)
{
if (!n)
{
//outObject.value = "";
return ;
}
outObject.value = n;
closeLayer();
}
else
{
closeLayer();
alert("您所要输出的控件对象并不存在!");
}
}function closeLayer() //这个层的关闭
{
document.all.numLayer.style.display = "none";
}function MJBSetNum(x, y) //主要的写程序**********
{
for (var i = 0; i < 20; i++)
{MJBWNum[i]="";
var da = eval("document.all.MJBNum" + i);
da.innerHTML = "";
da.style.backgroundColor = "#FFFFFF";
}//将显示框的内容全部清空
for (var i = x; i < y + 1; i++)
{
MJBWNum[i] = i;
}
for (var i = x; i < y + 1; i++)
{
var da = eval("document.all.MJBNum" + i);
da.innerHTML = "<b>" + MJBWNum[i] + "</b>";
//alert(da.innerHTML);
da.style.backgroundColor = (outObject.value == MJBWNum[i] && outObject.value != "") ? "#FFD700" : "#ADD8E6";
da.style.cursor = "hand"
}
}function document.onclick() //任意点击时关闭该控件
{
with(window.event.srcElement)
{
if (getAttribute("Author") == null && tagName != "INPUT" && tagName !=
"IMG")
document.all.numLayer.style.display = "none";
}
}function isNumber(s)
{
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != - 1)
{
return true;
}
else
{
return false;
}
}function valinum(tt, obj, xmin, ymax)
{
if (obj.value != "")
{
if (!isNumber(obj.value) || obj.value < xmin || obj.value > ymax)
{
alert("请输入或选择"+xmin+"-"+ymax+"之间的数字!");
obj.value = "";
obj.focus();
}
}
}
</script>
</body>
</html>
1)弹出层始终在下方,这样可能下方挡住了,我想让其随浏览器高度来定
2)弹出层被select挡住了,如何让其在最上层
3)除选择数字外,也可以输入指定范围的数字,这样需要判断用户输入是否合法,我是单独使用了onblur,感觉有点臃肿,能否直接在setnum中实现输入判断?或者有无其他更好办法?
4)以下弹出层始终是4*5的格子,能否根据总的数字数量来动态设置弹出层大小?
<html>
<title></title
<head>
</head><body>
<form action="" method="get" name="form1" id="form1">
<input type="text" name="nubtxt1" onfocus="setnum(this,document.form1.nubtxt1,0,5)" onblur="valinum(this,document.form1.nubtxt1,0,5)">
<input type="text" name="nubtxt2" onfocus="setnum(this,document.form1.nubtxt2,0,10)" onblur="valinum(this,document.form1.nubtxt2,0,10)">
<input type="text" name="nubtxt3" onfocus="setnum(this,document.form1.nubtxt3,0,12)" onblur="valinum(this,document.form1.nubtxt3,0,12)">
<br>
<select></select>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><input type="text" name="nubtxt4" onfocus="setnum(this,document.form1.nubtxt4,0,12)" onblur="valinum(this,document.form1.nubtxt4,0,12)"></form>
<script language="javascript">
document.writeln('<div id="numLayer" style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">');
document.writeln('<table border="1" cellspacing="1" cellpadding="1" width="100" height="100" bgcolor="#FFFFFF">');
var n = 0;
for (j = 0; j < 4; j++)
{
document.writeln('<tr align="center">');
for (i = 0; i < 5; i++)
{
document.writeln('<td width="20" height="20" id="MJBNum' + n + '" style="font-size:12px" Author="MJB" onclick="numClick(this.innerText)" align="center"></td>');
n++;
}
document.writeln('</tr>');
}
document.writeln('</table>');
document.writeln('</div>');var outObject;
var MJBWNum = new Array(20); //定义写数字的数组
function setnum(tt, obj, xmin, ymax) //主调函数
{
if (arguments.length > 4)
{
alert("对不起!传入本控件的参数太多!");
return ;
}
if (arguments.length == 0)
{
alert("对不起!您没有传回本控件任何参数!");
return ;
}
var dads = document.all.numLayer.style;
var th = tt;
var ttop = tt.offsetTop; //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent)
{
ttop += tt.offsetTop;
tleft += tt.offsetLeft;
}
dads.top = (ttyp == "image") ? ttop + thei: ttop + thei;
dads.left = tleft;
outObject = (arguments.length == 1) ? th : obj;
dads.display = '';
event.returnValue = false;
MJBSetNum(xmin, ymax);
}function numClick(n)
{
if (outObject)
{
if (!n)
{
//outObject.value = "";
return ;
}
outObject.value = n;
closeLayer();
}
else
{
closeLayer();
alert("您所要输出的控件对象并不存在!");
}
}function closeLayer() //这个层的关闭
{
document.all.numLayer.style.display = "none";
}function MJBSetNum(x, y) //主要的写程序**********
{
for (var i = 0; i < 20; i++)
{MJBWNum[i]="";
var da = eval("document.all.MJBNum" + i);
da.innerHTML = "";
da.style.backgroundColor = "#FFFFFF";
}//将显示框的内容全部清空
for (var i = x; i < y + 1; i++)
{
MJBWNum[i] = i;
}
for (var i = x; i < y + 1; i++)
{
var da = eval("document.all.MJBNum" + i);
da.innerHTML = "<b>" + MJBWNum[i] + "</b>";
//alert(da.innerHTML);
da.style.backgroundColor = (outObject.value == MJBWNum[i] && outObject.value != "") ? "#FFD700" : "#ADD8E6";
da.style.cursor = "hand"
}
}function document.onclick() //任意点击时关闭该控件
{
with(window.event.srcElement)
{
if (getAttribute("Author") == null && tagName != "INPUT" && tagName !=
"IMG")
document.all.numLayer.style.display = "none";
}
}function isNumber(s)
{
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != - 1)
{
return true;
}
else
{
return false;
}
}function valinum(tt, obj, xmin, ymax)
{
if (obj.value != "")
{
if (!isNumber(obj.value) || obj.value < xmin || obj.value > ymax)
{
alert("请输入或选择"+xmin+"-"+ymax+"之间的数字!");
obj.value = "";
obj.focus();
}
}
}
</script>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货