-
- 加为好友
- 发送私信
- 在线聊天
-
 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
烦～
呵呵～
献丑了
|
|
|
|
100
修改
删除
举报
引用
回复
| |
