发一个 Demo

bhtfg538 2008-08-08 09:40:55

散分：
今天国人都要散分为奥运加油

随便封的一个 js 小键盘

xxx.js
var Class=
{
Create:function()
{
return function()
{
this.Initialize.apply(this, arguments);//调用构造函数
}
}
};
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];//实现继承
}
return destination;
};
var $=function(id)
{
return "string"==typeof(id)?document.getElementById(id):id;
};
var Browser=
{
IE:/MSIE/.test(window.navigator.userAgent),
FireFox:/Firefox/.test(window.navigator.userAgent)
};
var Drag=Class.Create();
Drag.prototype=
{
Initialize: function(obj, drag) {
var oThis = this;
this._obj = $(obj);//拖放对象
this.Drag = $(drag);//触发对象
this._x = this._y = 0;//记录鼠标相对拖放对象的位置
this._fM = function(e){ oThis.Move(window.event || e); }//移动事件
this._fS = function(){ oThis.Stop(); }//停止事件
this._obj.style.position = "absolute";
this.AddEvent(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); }); //初始化Start获得鼠标焦点事件
},
AddEvent:function(oTarget, sEventType, fnHandler)
{
if (Browser.FireFox)
{
oTarget.addEventListener(sEventType, fnHandler, false);//FF
}
else if (Browser.IE)
{
oTarget.attachEvent("on" + sEventType, fnHandler);//IE 6+
}
else
{
oTarget["on" + sEventType] = fnHandler;//IE5-
}
},
DelEvent:function(oTarget, sEventType, fnHandler) {
if (Browser.FireFox)
{
oTarget.removeEventListener(sEventType, fnHandler, false); //FF
}
else if (Browser.IE)
{
oTarget.detachEvent("on" + sEventType, fnHandler); //IE 6+
}
else
{
oTarget["on" + sEventType] = null;//IE5-
}
},
Start:function(oEvent) {
if(Browser.FireFox){
window.getSelection().removeAllRanges();}
else
{
document.selection.empty();
}
//记录鼠标相对拖放对象的位置
this._x = oEvent.clientX - this._obj.offsetLeft;
this._y = oEvent.clientY - this._obj.offsetTop;
//mousemove时移动 mouseup时停止
this.AddEvent(document, "mousemove", this._fM);
this.AddEvent(document, "mouseup", this._fS);
//使鼠标移到窗口外也能释放
if(Browser.IE)
{
this.AddEvent(this.Drag, "losecapture", this._fS);//失去焦点时候出发Stop事件
this.Drag.setCapture();//重新获得焦点初始化Drag 然后获得焦点
}
else
{
this.AddEvent(window, "blur", this._fS);//FF 就是 blur 事件
}
},
Move:function(oEvent) {

//当前鼠标位置减去相对拖放对象的位置得到offset位置
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
this._obj.style.left = iLeft + "px";
this._obj.style.top = iTop + "px";
},
Stop:function() {
//移除事件
this.DelEvent(document, "mousemove", this._fM);
this.DelEvent(document, "mouseup", this._fS);
if(Browser.IE)
{
this.DelEvent(this.Drag, "losecapture", this._fS);
this.Drag.releaseCapture();
}
else
{
this.DelEvent(window, "blur", this._fS);
}
}
};
Array.prototype.Del=function(n)
{
if(n<0)
return this;
else
return this.slice(0,n).concat(this.slice(n+1,this.length));
};
var KeyBoard=Class.Create();
KeyBoard.prototype=
{
Initialize:function(obj,id,type)
{
var Othis=this;
this._type=type;//键盘类型
this._id=id;//给哪个id 获取值
this._obj=$(obj);//显示在在哪个div id下
this._obj.innerHTML="";
this._objid=obj;
this.arr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9'];
this.GetCode(this.arr,this._type);
},
GetCode:function(arr,type)
{
var oThis=this;
var obj=document.createElement("table");
obj.width="200";
obj.height="100";
obj.cellpadding="4";
obj.bgColor="#deeefe";
var rowtitle=obj.insertRow();
rowtitle.align="right";
rowtitle.bgColor="#83bdf9";
rowtitle.height="26";
var celltitle=rowtitle.insertCell();
celltitle.innerHTML="<div onclick=document.getElementById('"+this._objid+"').style.display='none'><a href='#' style='color:red;font-size:14px; text-decoration:none'>关闭</a></div>"
celltitle.colSpan="6";
for(var j=0;j<6;j++){
var row=obj.insertRow();
row.align="center";
for(var i=0;i<6;i++)
{
var index = Math.floor(Math.random()*(arr.length-1));
var cell=row.insertCell();
divid="s"+index;
var divvalue;
if(type=="upper")
{
divvalue=arr[index].toLocaleUpperCase();
}
else if(type="lower")
{
divvalue=arr[index];
}
else
{
divvalue=arr[index];
}
cell.innerHTML="<div id='"+divid+"' onmouseover=this.style.background='#aabffb' onmouseout=this.style.background='' onclick=\"document.getElementById('"+this._id+"').value+='"+divvalue+"';\" style='border:1px solid #0d5096; width:28px; height:17px;cursor:hand;'><font style='color:#0b33b5;font-weight:bold;font-size:15px;'>"+divvalue+"</div>";
arr=arr.Del(index);
}
}
var rowend=obj.insertRow();
rowend.align="center";
var cellend=rowend.insertCell();
cellend.colSpan="2";
cellend.innerHTML="<div onmouseover=this.style.background='#aabffb' onmouseout=this.style.background='' style='border:1px solid #0d5096; height:17px;cursor:hand;' onclick=document.getElementById('"+this._id+"').value=document.getElementById('"+this._id+"').value.slice(0,-1);><font style='color:#0b33b5;font-weight:bold;font-size:15px;'>退格</font></div>";
var cellend=rowend.insertCell();
cellend.colSpan="2";
cellend.innerHTML="<div onmouseover=this.style.background='#aabffb' onmouseout=this.style.background='' style='border:1px solid #0d5096; height:17px;cursor:hand;' onclick=\"new KeyBoard('"+this._objid+"','"+this._id+"','upper')\";><font style='color:#0b33b5;font-weight:bold;font-size:15px;'>大写</font></div>";
var cellend=rowend.insertCell();
cellend.colSpan="2";
cellend.innerHTML="<div onmouseover=this.style.background='#aabffb' onmouseout=this.style.background='' style='border:1px solid #0d5096; height:17px;cursor:hand;' onclick=\"new KeyBoard('"+this._objid+"','"+this._id+"','lower')\"><font style='color:#0b33b5;font-weight:bold;font-size:15px;'>小写</font></div>";
this._obj.appendChild(obj);
}
};

xxx.aspx 自己修改成xxx.htm 或者 .asp
<script type="text/javascript" src="lf/Login.js"></script></head><body><form id="form1" runat="server"><div>
<table align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td height="200"><strong>登录系统</strong></td>
</tr>
<tr>
<td>管理员帐号：<asp:TextBox runat="server" ID="tb_ServerUserName" ToolTip="管理员帐号"></asp:TextBox></td>
<td></td>
</tr>
<tr>
<td>管理员密码：<asp:TextBox runat="server" ID="tb_ServerUserPassword" TextMode="Password" ToolTip="管理员密码"></asp:TextBox><img src="../images/KeyBoard.GIF" alt="软键盘" onclick="document.getElementById('s1').style.display='block';"/></td><td><div id="s1" style="display:none;"></div></td>
</tr>
<tr>
<td>系统验证码：<asp:Image runat="server" ID="img_ServerSafeCode" ToolTip="系统验证码"/>
</td>
</tr>
<tr align="center">
<td><asp:Button ID="btn_ServerLogin" runat="server" Text="登入管理"/>
<input type="reset" value="重新填写"/>
</td><td></td>
</tr>
</table>
</div></form>
<script type="text/javascript">
new Drag("s1","s1");
new KeyBoard("s1","tb_ServerUserPassword","lower");
document.getElementById("tb_ServerUserPassword").onkeyup=function(str)
{
return function()
{
this.value="";
alert("为了您的账户安全，请使用小键盘！");
}
}();
</script>

</body>

键盘暂时不支持 ff
拖动支持讨厌 ff insertRow 还要加 insertRow（0）和tbody
烦～
呵呵～
献丑了

...全文