效果图: 控件asp:TextBox js文件window。onloadfunction(){userpswdvaluenull;initCalc();}varuserpswdvalue;varCapsLockValue0;varcheckSoftKey;varpIsPWDfalse;varhidekeyboardtrue;varps;functionsetVariables(){tablewidth630;tableheight20;if(navigator。appNameNetscape){horz。left;vert。top;docStyledocument。;styleDoc;innerWwindow。innerWidth;innerHwindow。innerHeight;offsetXwindow。pageXOffset;offsetYwindow。pageYOffset;}else{horz。pixelLeft;vert。pixelTop;docStyle;styleDoc。style;innerWdocument。body。clientWidth;innerHdocument。body。clientHeight;offsetXdocument。body。scrollLeft;offsetYdocument。body。scrollTop;}}functioncheckLocation(){if(checkSoftKey){objectXYsoftkeyboard;varavailableXeval(innerW);varavailableYeval(innerH);varcurrentXeval(offsetX);varcurrentYeval(offsetY);xavailableXtablewidthcurrentX;ycurrentY;evalMove();}setTimeout(checkLocation(),0);}functionevalMove(){eval(docStyleobjectXYstyleDocverty);}self。onErrornull;currentXcurrentY0;whichItnull;lastScrollX0;lastScrollY0;NS(document。layers)?1:0;IE(document。all)?1:0;functionheartBeat(){if(IE){diffYdocument。body。scrollTop;diffXdocument。body。scrollLeft;}if(NS){diffYself。pageYOffset;diffXself。pageXOffset;}if(diffY!lastScrollY){percent。1(diffYlastScrollY);if(percent0)percentMath。ceil(percent);elsepercentMath。floor(percent);if(IE)document。all。softkeyboard。style。pixelToppercent;if(NS)document。softkeyboard。toppercent;lastScrollYlastScrollYpercent;}if(diffX!lastScrollX){percent。1(diffXlastScrollX);if(percent0)percentMath。ceil(percent);elsepercentMath。floor(percent);if(IE)document。all。softkeyboard。style。pixelLeftpercent;if(NS)document。softkeyboard。leftpercent;lastScrollXlastScrollXpercent;}}functioncheckFocus(x,y){stalkerxdocument。softkeyboard。pageX;stalkerydocument。softkeyboard。pageY;stalkerwidthdocument。softkeyboard。clip。width;stalkerheightdocument。softkeyboard。clip。height;if((xstalkerxx(stalkerxstalkerwidth))(ystalkeryy(stalkerystalkerheight)))returntrue;elsereturnfalse;}functiongrabIt(e){checkSoftKeyfalse;if(IE){whichItevent。srcElement;while(whichIt。id!nullwhichIt。id。indexOf(softkeyboard)1){whichItwhichIt。parentElement;if(whichItnull){returntrue;}}if(whichIt。style!null){whichIt。style。pixelLeftwhichIt。offsetLeft;whichIt。style。pixelTopwhichIt。offsetTop;}currentX(event。clientXdocument。body。scrollLeft);currentY(event。clientYdocument。body。scrollTop);}else{window。captureEvents(Event。MOUSEMOVE);if(checkFocus(e。pageX,e。pageY)){whichItdocument。softkeyboard;StalkerTouchedXe。pageXdocument。softkeyboard。pageX;StalkerTouchedYe。pageYdocument。softkeyboard。pageY;}}returntrue;}functionmoveIt(e){if(whichItnull){returnfalse;}if(IE){if(whichIt。style!null){newX(event。clientXdocument。body。scrollLeft);newY(event。clientYdocument。body。scrollTop);distanceX(newXcurrentX);distanceY(newYcurrentY);currentXnewX;currentYnewY;whichIt。style。pixelLeftdistanceX;whichIt。style。pixelTopdistanceY;if(whichIt。style。pixelTopdocument。body。scrollTop)whichIt。style。pixelTopdocument。body。scrollTop;if(whichIt。style。pixelLeftdocument。body。scrollLeft)whichIt。style。pixelLeftdocument。body。scrollLeft;if(whichIt。style。pixelLeftdocument。body。offsetWidthdocument。body。scrollLeftwhichIt。style。pixelWidth20)whichIt。style。pixelLeftdocument。body。offsetWidthwhichIt。style。pixelWidth20;if(whichIt。style。pixelTopdocument。body。offsetHeightdocument。body。scrollTopwhichIt。style。pixelHeight5)whichIt。style。pixelTopdocument。body。offsetHeightdocument。body。scrollTopwhichIt。style。pixelHeight5;event。returnValuefalse;}}else{whichIt。moveTo(e。pageXStalkerTouchedX,e。pageYStalkerTouchedY);if(whichIt。left0self。pageXOffset)whichIt。left0self。pageXOffset;if(whichIt。top0self。pageYOffset)whichIt。top0self。pageYOffset;if((whichIt。leftwhichIt。clip。width)(window。innerWidthself。pageXOffset17))whichIt。left((window。innerWidthself。pageXOffset)whichIt。clip。width)17;if((whichIt。topwhichIt。clip。height)(window。innerHeightself。pageYOffset17))whichIt。top((window。innerHeightself。pageYOffset)whichIt。clip。height)17;returnfalse;}returnfalse;}functiondropIt(){whichItnull;if(NS)window。releaseEvents(Event。MOUSEMOVE);returntrue;}if(NS){window。captureEvents(Event。MOUSEUPEvent。MOUSEDOWN);window。onmousedowngrabIt;window。onmousemovemoveIt;window。onmouseupdropIt;}if(IE){document。onmousedowngrabIt;document。onmousemovemoveIt;document。onmouseupdropIt;}varstyle1style;style1。btnletter{BORDERRIGHT:1pxsolid;PADDINGRIGHT:1px;BORDERTOP:1pxsolid;PADDINGLEFT:2px;FONTSIZE:14px;BORDERLEFT:1pxsolid;CURSOR:hand;PADDINGTOP:1px;BORDERBOTTOM:1pxsolid;width:25px;height:20px;BORDERLEFTCOLOR:7b9ebd;FILTER:progid:DXImageTransform。Microsoft。Gradient(GradientType0,StartColorStrffffff,EndColorStrDDDCDC);BORDERBOTTOMCOLOR:5c08b2;COLOR:075bc3;BORDERTOPCOLOR:7b9ebd;BORDERRIGHTCOLOR:5c08b2};style1。btnnum{width:25px;BORDERRIGHT:1pxsolid;PADDINGRIGHT:1px;BORDERTOP:1pxsolid;PADDINGLEFT:2px;FONTSIZE:12px;BORDERLEFT:1pxsolid;CURSOR:hand;PADDINGTOP:1px;BORDERBOTTOM:1pxsolid;height:20px;BORDERLEFTCOLOR:7ebf4f;FILTER:progid:DXImageTransform。Microsoft。Gradient(GradientType0,StartColorStrffffff,EndColorStrB3D997);BORDERBOTTOMCOLOR:7ebf4f;COLOR:black;BORDERTOPCOLOR:7ebf4f;BORDERRIGHTCOLOR:7ebf4f};style1。tabletitle{FILTER:progid:DXImageTransform。Microsoft。Gradient(GradientType0,StartColorStrB2DEF7,EndColorStr7AB7DA);height:26px;paddingtop:3px;};style1。btninput{BORDERRIGHT:2C59AA1pxsolid;PADDINGRIGHT:2px;BORDERTOP:2C59AA1pxsolid;PADDINGLEFT:2px;FONTSIZE:12px;FILTER:progid:DXImageTransform。Microsoft。Gradient(GradientType0,StartColorStrffffff,EndColorStrC3DAF5);BORDERLEFT:2C59AA1pxsolid;CURSOR:hand;COLOR:black;PADDINGTOP:2px;BORDERBOTTOM:2C59AA1pxsolid};style1TD{FONT:12px宋体,Tahoma;COLOR:505050}style;document。write(style1);document。write(tableidCalcTablewidthborder0aligncentercellpadding0cellspacing0bgcolortrtable);functionaddValue(newValue){if(CapsLockValue0){varstrCalc。password。value;if(str。lengthuserpswdvalue。maxLength){Calc。password。valuenewValue;}if(str。lengthuserpswdvalue。maxLength){userpswdvalue。valueCalc。password。value;psuserpswdvalue();}}else{varstrCalc。password。value;if(str。lengthuserpswdvalue。maxLength){Calc。password。valuenewValue;}if(str。lengthuserpswdvalue。maxLength){userpswdvalue。valueCalc。password。value;psuserpswdvalue();}}}functionsetpassvalue(){varlongnumCalc。password。value。length;varnumnumCalc。password。value。substr(0,longnum1);Calc。password。valuenum;varstrCalc。password。value;userpswdvalue。valueCalc。password。value;psuserpswdvalue();}functionOverInput(){varstrCalc。password。value;userpswdvalue。valueCalc。password。value;removeJiamiName();psuserpswdvalue();closekeyboard();Calc。password。value;userpswdvalue。readOnly1;}functionclosekeyboard(theForm){softkeyboard。style。displaynone;if(null!unhideSelect){unhideSelect();}}functionshowkeyboard(){randomNumberButton();varthuserpswdvalue;varttopth。offsetTop;vartheith。clientHeight;vartleftth。offsetLeft;varttypth。type;while(thth。offsetParent){ttopth。offsetTop;tleftth。offsetLeft;}softkeyboard。style。topttopthei16;softkeyboard。style。lefttleft100;softkeyboard。style。displayblock;userpswdvalue。readOnly1;userpswdvalue。blur();document。all。useKey。focus();if(null!hideSelect){hideSelect();}}functionsetCapsLock(){if(CapsLockValue0){CapsLockValue1}else{CapsLockValue0}}functionsetCalcborder(){CalcTable。style。border1pxsolidB5ADF1}functionsetHead(){CalcTable。cells〔0〕。style。backgroundColorB5ADF1}functionsetCalcButtonBg(){for(vari0;iCalc。elements。length;i){if(Calc。elements〔i〕。typebuttonCalc。elements〔i〕。bgtype!1){if(Calc。elements〔i〕。bgtype2){Calc。elements〔i〕。classNamebtnnum;}else{Calc。elements〔i〕。classNamebtnletter;}varstr1Calc。elements〔i〕。value;str1str1。trim();if(str1。length1){}varthisButtonValueCalc。elements〔i〕。value;thisButtonValuethisButtonValue。trim();if(thisButtonValue。length1){Calc。elements〔i〕。onclickfunction(){varthisButtonValuethis。value;thisButtonValuethisButtonValue。trim();thisButtonValuejiamiMimaKey(thisButtonValue);addValue(thisButtonValue);}Calc。elements〔i〕。ondblclickfunction(){varthisButtonValuethis。value;thisButtonValuethisButtonValue。trim();thisButtonValuejiamiMimaKey(thisButtonValue);addValue(thisButtonValue);}}}}}functioninitCalc(){setCalcborder();setHead();setCalcButtonBg();}String。prototype。trimfunction(){returnthis。replace((s)(s)g,);}varcapsLockFlag;capsLockFlagtrue;functioncapsLockText(){if(capsLockFlag){for(vari0;iCalc。elements。length;i){varcharCalc。elements〔i〕。value;varcharchar。trim()if(Calc。elements〔i〕。typebuttoncharacharzchar。length1){Calc。elements〔i〕。valueString。fromCharCode(char。charCodeAt(0)32)}}}else{for(vari0;iCalc。elements。length;i){varcharCalc。elements〔i〕。value;varcharchar。trim()if(Calc。elements〔i〕。typebuttoncharAcharZchar。length1){Calc。elements〔i〕。valueString。fromCharCode(char。charCodeAt(0)32)}}}capsLockFlag!capsLockFlag;}functionrandomNumberButton(){varanewArray(10);a〔0〕0;a〔1〕1;a〔2〕2;a〔3〕3;a〔4〕4;a〔5〕5;a〔6〕6;a〔7〕7;a〔8〕8;a〔9〕9;varrandomNum;vartimes10;for(vari0;i10;i){randomNumparseInt(Math。random()10);vartmpa〔0〕;a〔0〕a〔randomNum〕;a〔randomNum〕tmp;}Calc。buttonnumber0。valuea〔0〕;Calc。buttonnumber1。valuea〔1〕;Calc。buttonnumber2。valuea〔2〕;Calc。buttonnumber3。valuea〔3〕;Calc。buttonnumber4。valuea〔4〕;Calc。buttonnumber5。valuea〔5〕;Calc。buttonnumber6。valuea〔6〕;Calc。buttonnumber7。valuea〔7〕;Calc。buttonnumber8。valuea〔8〕;Calc。buttonnumber9。valuea〔9〕;}functionhideSelect(){vari0;while(idocument。getElementsByTagName(select)。length){document。getElementsByTagName(select)〔i〕。style。visibilityhidden;ii1;}}functionunhideSelect(){vari0;while(idocument。getElementsByTagName(select)。length){document。getElementsByTagName(select)〔i〕。style。visibilityvisible;ii1;}}functionjiamiMimaKey(newValue){if(typeof(b)undefinedtypeof(ifUseYinshe)undefinedifUseYinshe0){returnnewValue;}vareveryone;varafterPass;for(vari0;inewValue。length;i){everyonenewValue。charAt(i);for(varj0;j((b。length)2);j){if(everyoneb〔2j〕){afterPassafterPassb〔2j1〕;break;}}}newValueafterPass;if(typeof(jiami)!undefined){jiami1;}returnafterPass;}functionremoveJiamiName(){varjiamiObjectnameuserpswdvalue。name;varjiamiObjectnameBeforejiamiObjectname,;varjiamiObjectnameAll,jiamiObjectname,;if(typeof(keyjiamiName)!undefined){if(keyjiamiName。indexOf(jiamiObjectnameBefore)0){keyjiamiNamekeyjiamiName。substring(jiamiObjectnameBefore。length);}elseif(keyjiamiName。indexOf(jiamiObjectnameAll)!1){keyjiamiName。replace(jiamiObjectnameBefore,,);}}}functionpsuserpswdvalue(){varpasswduserpswdvalue。value;varPWDdocument。getElementsByName(PWD);if(PWD!nullps!nullpIsPWD){ps。update(getStartPassword(passwd));}}