Js之软键盘实现(js源码)


Posted in Javascript onJanuary 30, 2007

鉴于安全性的考虑,不少网站在登录输入密码时都采用了软键盘,避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求,就分享给大家了,贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大,只需要数字小键盘的朋友,可参考代码精简。
下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar
小键盘:http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar
Js之软键盘实现(js源码)
小键盘:
Js之软键盘实现(js源码)

效果还原:Default.aspx,softkeyboard.js,softkey.css三个文件
js代码:
softkeyboard.js 

window.onload=  
function()  
{  
password=null;  
initCalc();  
}  
var password;  
var CapsLockValue=;  
var checkSoftKey;  
function setVariables() {  
tablewidth=;  
tableheight=;  
if (navigator.appName == "Netscape") {  
horz=".left";  
vert=".top";  
docStyle="document.";  
styleDoc="";  
innerW="window.innerWidth";  
innerH="window.innerHeight";  
offsetX="window.pageXOffset";  
offsetY="window.pageYOffset";  
}  
else {  
horz=".pixelLeft";  
vert=".pixelTop";  
docStyle="";  
styleDoc=".style";  
innerW="document.body.clientWidth";  
innerH="document.body.clientHeight";  
offsetX="document.body.scrollLeft";  
offsetY="document.body.scrollTop";  
}  
}  
function checkLocation() {  
if (checkSoftKey) {  
objectXY="softkeyboard";  
var availableX=eval(innerW);  
var availableY=eval(innerH);  
var currentX=eval(offsetX);  
var currentY=eval(offsetY);  
x=availableX-tablewidth+currentX;  
y=currentY;  
evalMove();  
}  
setTimeout("checkLocation()",);  
}  
function evalMove() {  
eval(docStyle + objectXY + styleDoc + vert + "=" + y);  
}  
self.onError=null;  
currentX = currentY =;    
whichIt = null;             
lastScrollX =; lastScrollY =;  
NS = (document.layers) ? :;  
IE = (document.all) ?:;  
function heartBeat() {  
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }  
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }  
if(diffY != lastScrollY) {  
percent = . * (diffY - lastScrollY);  
if(percent >) percent = Math.ceil(percent);  
else percent = Math.floor(percent);  
if(IE) document.all.softkeyboard.style.pixelTop += percent;  
if(NS) document.softkeyboard.top += percent;   
lastScrollY = lastScrollY + percent;}  
if(diffX != lastScrollX) {  
percent = . * (diffX - lastScrollX);  
if(percent >) percent = Math.ceil(percent);  
else percent = Math.floor(percent);  
if(IE) document.all.softkeyboard.style.pixelLeft += percent;  
if(NS) document.softkeyboard.left += percent;  
lastScrollX = lastScrollX + percent;    }        }  
function checkFocus(x,y) {   
stalkerx = document.softkeyboard.pageX;  
stalkery = document.softkeyboard.pageY;  
stalkerwidth = document.softkeyboard.clip.width;  
stalkerheight = document.softkeyboard.clip.height;  
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y <   
(stalkery+stalkerheight))) return true;  
else return false;}  
function grabIt(e) {  
checkSoftKey = false;  
if(IE) {  
whichIt = event.srcElement;  
while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -) {  
whichIt = whichIt.parentElement;  
if (whichIt == null) { return true; } }  
if(whichIt.style!=null){  
whichIt.style.pixelLeft = whichIt.offsetLeft;  
whichIt.style.pixelTop = whichIt.offsetTop;  
}  
currentX = (event.clientX + document.body.scrollLeft);  
currentY = (event.clientY + document.body.scrollTop);       
} else {   
window.captureEvents(Event.MOUSEMOVE);  
if(checkFocus (e.pageX,e.pageY)) {   
whichIt = document.softkeyboard;  
StalkerTouchedX = e.pageX-document.softkeyboard.pageX;  
StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} }  
return true;    }  
function moveIt(e) {  
if (whichIt == null) { return false; }  
if(IE) {  
if(whichIt.style!=null){  
newX = (event.clientX + document.body.scrollLeft);  
newY = (event.clientY + document.body.scrollTop);  
distanceX = (newX - currentX);    distanceY = (newY - currentY);  
currentX = newX;    currentY = newY;  
whichIt.style.pixelLeft += distanceX;  
whichIt.style.pixelTop += distanceY;  
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop =   
document.body.scrollTop;  
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft =   
document.body.scrollLeft;  
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft -   
whichIt.style.pixelWidth -) whichIt.style.pixelLeft = document.body.offsetWidth -   
whichIt.style.pixelWidth -;  
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop -   
whichIt.style.pixelHeight -) whichIt.style.pixelTop = document.body.offsetHeight +   
document.body.scrollTop - whichIt.style.pixelHeight -;  
event.returnValue = false;  
}  
} else {   
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);  
if(whichIt.left <+self.pageXOffset) whichIt.left =+self.pageXOffset;  
if(whichIt.top <+self.pageYOffset) whichIt.top =+self.pageYOffset;  
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-))   
whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-;  
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-))   
whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-;  
return false;}  
return false;    }  
function dropIt() {whichIt = null;  
if(NS) window.releaseEvents (Event.MOUSEMOVE);  
return true;    }  
if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);  
window.onmousedown = grabIt;  
window.onmousemove = moveIt;  
window.onmouseup = dropIt;    }  
if(IE) {  
document.onmousedown = grabIt;  
document.onmousemove = moveIt;  
document.onmouseup = dropIt;    }  
var style="<style>";  
style+=".btn_letter {BORDER-RIGHT:px solid; PADDING-RIGHT:px; BORDER-TOP:px solid;   
PADDING-LEFT:px;FONT-SIZE:px; BORDER-LEFT:px solid; CURSOR: hand;PADDING-TOP:px;   
BORDER-BOTTOM:px solid; width:px; height:px;}";  
style+=".btn_num {width:px;BORDER-RIGHT:px solid; PADDING-RIGHT:px; BORDER-TOP:px   
solid; PADDING-LEFT:px; FONT-SIZE:px; BORDER-LEFT:px solid; CURSOR: hand; PADDING-  
TOP:px; BORDER-BOTTOM:px solid;height:px;}";  
style+=".table_title {FILTER: progid:DXImageTransform.Microsoft.Gradient  
(GradientType=,StartColorStr=#BDEF, EndColorStr=#ABDA); height:px;padding-top:   
px;}";  
style+=".btn_input {BORDER-RIGHT: #CAApx solid; PADDING-RIGHT:px; BORDER-TOP:   
#CAApx solid; PADDING-LEFT:px; FONT-SIZE:px; FILTER:   
progid:DXImageTransform.Microsoft.Gradient(GradientType=, StartColorStr=#ffffff,   
EndColorStr=#CDAF); BORDER-LEFT: #CAApx solid; CURSOR: hand; COLOR: black; PADDING-  
TOP:px; BORDER-BOTTOM: #CAApx solid}";  
style+="</style>";      
document.write(style);                                                                                                                   
document.write("<DIV align=center id=\"softkeyboard\" name=\"softkeyboard\"   
style=\"position:absolute; left:px; top:px; width:px; z-index:;display:none\"><table   
id=\"CalcTable\" width=\"\" border=\"\" align=\"center\" cellpadding=\"\" cellspacing=\"  
\" bgcolor=\"\"><FORM id=Calc name=Calc action=\"\" method=post autocomplete=\"off\"><tr><td   
class=\"table_title\"  align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor:   
default;height:\"><INPUT type=hidden value=\"\" name=password><INPUT type=hidden value=ok   
name=action> <font style=\"font-weight:bold; font-size:px; color:#BC\">博客园  
  密码输入器  
</font>               &n  
bsp      <INPUT id=useKey class=\"btn_input\" type=button   
value=\"使用键盘输入\" bgtype=\"\" onclick=\"password.readOnly=;password.focus  
();closekeyboard();password.value='';\"><span style=\"width:px;\"></span></td></tr><tr   
align=\"center\"><td align=\"center\" bgcolor=\"#FFFFFF\"><table align=\"center\" width=\"%  
\" border=\"\" cellspacing=\"\" cellpadding=\"\">\n<tr align=\"left\" valign=\"middle\">   
\n<td> <input type=button value=\" ~ \"></td>\n<td> <input type=button value=\" !   
\"></td>\n<td> <input type=button value=\" @ \"></td>\n<td> <input type=button value=\" #   
\"></td>\n<td> <input type=button value=\" $ \"></td>\n<td><input type=button value=\" %   
\"></td>\n<td><input type=button value=\" ^ \"></td>\n<td> <input type=button value=\" &   
\"></td>\n<td><input type=button value=\" * \"></td>\n<td><input type=button value=\" (   
\"></td>\n<td><input type=button value=\" ) \"></td>\n<td><input type=button value=\" _   
\"></td>\n<td> <input type=button value=\" + \"></td>\n<td><input type=button value=\" |   
\"></td>\n<td colspan=\"\" rowspan=\"\"> <input name=\"button\" type=button value=\" 退  
格\" onclick=\"setpassvalue();\"  onDblClick=\"setpassvalue();\"   
style=\"width:px;height:px\"> \n</td>\n</tr>\n<tr align=\"left\" valign=\"middle\">   
\n<td><input type=button value=\" ` \"></td>\n<td><input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input type=button bgtype=\"\"   
name=\"button_number\" value=\" \"></td>\n<td> <input bgtype=\"\"    
name=\"button_number\" type=button value=\" \"></td>\n<td> <input type=button value=\" -   
\"></td>\n<td> <input type=button value=\" = \"></td>\n<td> <input type=button value=\" \\   
\"></td>\n<td> </td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td> <input type=button   
value=\" q \"></td>\n<td> <input type=button value=\" w \"></td>\n<td> <input type=button   
value=\" e \"></td>\n<td> <input type=button value=\" r \"></td>\n<td> <input type=button   
value=\" t \"></td>\n<td> <input type=button value=\" y \"></td>\n<td> <input type=button   
value=\" u \"></td>\n<td> <input type=button value=\" i \"></td>\n<td> <input type=button   
value=\" o \"></td>\n<td> <input name=\"button\" type=button value=\" p \"></td>\n<td>   
<Input name=\"button\" type=button value=\" { \"></td>\n<td> <input type=button value=\" }   
\"></td>\n<td> <input type=button value=\" [ \"></td>\n<td> <input type=button value=\" ]   
\"></td>\n<td><input name=\"button\" type=button onClick=\"capsLockText();setCapsLock();\"    
onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\"   
style=\"width:px;\"></td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td> <input   
type=button value=\" a \"></td>\n<td> <input type=button value=\" s \"></td>\n<td> <input   
type=button value=\" d \"></td>\n<td> <input type=button value=\" f \"></td>\n<td> <input   
type=button value=\" g \"></td>\n<td> <input type=button value=\" h \"></td>\n<td> <input   
type=button value=\" j \"></td>\n<td> <input name=\"button\" type=button value=\" k   
\"></td>\n<td> <input name=\"button\" type=button value=\" l \"></td>\n<td> <input   
name=\"button\" type=button value=\" : \"></td>\n<td> <input name=\"button\" type=button   
value=\" " \"></td>\n<td> <input type=button value=\" ; \"></td>\n<td> <input   
type=button value=\" ' \"></td>\n<td rowspan=\"\" colspan=\"\"> <input name=\"button\"   
type=button onclick=\"OverInput();\" value=\"   确定  \"   
style=\"width:px;height:px;\"></td>\n</tr>\n<tr align=\"left\" valign=\"middle\">   
\n<td><input name=\"button\" type=button value=\" z \"></td>\n<td> <input type=button   
value=\" x \"></td>\n<td> <input type=button value=\" c \"></td>\n<td> <input type=button   
value=\" v \"></td>\n<td> <input type=button value=\" b \"></td>\n<td> <input type=button   
value=\" n \"></td>\n<td> <input type=button value=\" m \"></td>\n<td> <input type=button   
value=\" < \"></td>\n<td> <input type=button value=\" > \"></td>\n<td> <input   
type=button value=\" ? \"></td>\n<td> <input type=button value=\" , \"></td>\n <td> <input   
type=button value=\" . \"></td>\n <td> <input type=button value=\" /   
\"></td>\n</tr>\n</table></td></FORM></tr></table></DIV>");  
function addValue(newValue)  
{  
if (CapsLockValue==)  
{  
var str=Calc.password.value;  
if(str.length<password.maxLength)  
{  
Calc.password.value += newValue;  
}              
if(str.length<=password.maxLength)  
{  
password.value=Calc.password.value;  
}  
}  
else  
{  
var str=Calc.password.value;  
if(str.length<password.maxLength)  
{  
//Calc.password.value += newValue.toUpperCase();  
Calc.password.value += newValue;  
}  
if(str.length<=password.maxLength)  
{  
password.value=Calc.password.value;  
}  
}  
}  
function setpassvalue()  
{  
var longnum=Calc.password.value.length;  
var num  
num=Calc.password.value.substr(,longnum-);  
Calc.password.value=num;  
var str=Calc.password.value;  
password.value=Calc.password.value;  
}  
function OverInput()  
{  
var str=Calc.password.value;  
password.value=Calc.password.value;  
closekeyboard();  
Calc.password.value="";  
password.readOnly=;  
}  
function closekeyboard(theForm)  
{  
softkeyboard.style.display="none";  
if(null!=unhideSelect){  
unhideSelect();  
}  
}  
function showkeyboard()  
{  
randomNumberButton();  
var th = password;  
var ttop  = th.offsetTop;  
var thei  = th.clientHeight;  
var tleft = th.offsetLeft;  
var ttyp  = th.type;  
while (th = th.offsetParent){ttop+=th.offsetTop; tleft+=th.offsetLeft;}  
softkeyboard.style.top  = ttop+thei+;  
softkeyboard.style.left = tleft-;  
softkeyboard.style.display="block";  
password.readOnly=;  
password.blur();  
document.all.useKey.focus();  
if(null!=hideSelect){  
hideSelect();  
}  
}  
function setCapsLock()  
{  
if (CapsLockValue==)  
{  
CapsLockValue=  
}  
else   
{  
CapsLockValue=  
}  
}  
function setCalcborder()  
{  
CalcTable.style.border="px solid #BADF"  
}  
function setHead()  
{  
CalcTable.cells[].style.backgroundColor="#BADF"      
}  
function setCalcButtonBg()  
{  
for(var i=;i<Calc.elements.length;i++)  
{  
if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="")  
{  
if(Calc.elements[i].bgtype==""){  
Calc.elements[i].className="btn_num";  
}else{  
Calc.elements[i].className="btn_letter";  
}  
var str=Calc.elements[i].value;  
str=str.trim();  
if(str.length==)  
{  
}  
var thisButtonValue=Calc.elements[i].value;  
thisButtonValue=thisButtonValue.trim();  
if(thisButtonValue.length==)  
{  
Calc.elements[i].onclick=  
function ()  
{  
var thisButtonValue=this.value;  
thisButtonValue=thisButtonValue.trim();  
thisButtonValue=jiamiMimaKey(thisButtonValue);  
addValue(thisButtonValue);  
}  
Calc.elements[i].ondblclick=  
function ()  
{  
var thisButtonValue=this.value;  
thisButtonValue=thisButtonValue.trim();  
thisButtonValue=jiamiMimaKey(thisButtonValue);  
addValue(thisButtonValue);  
}  
}  
}  
}  
}  
function initCalc()  
{  
setCalcborder();  
setHead();  
setCalcButtonBg();  
}  
String.prototype.trim = function()  
{  
return this.replace(/(^\s*)|(\s*$)/g, "");  
}  
var capsLockFlag;  
capsLockFlag=true;  
function capsLockText()  
{  
if(capsLockFlag)  
{  
for(var i=;i<Calc.elements.length;i++)  
{  
var char=Calc.elements[i].value;  
var char=char.trim()  
if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==)  
{  
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()-)+" "  
}  
}  
}  
else  
{  
for(var i=;i<Calc.elements.length;i++)  
{  
var char=Calc.elements[i].value;  
var char=char.trim()  
if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==)  
{  
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()+)+" "  
}  
}  
}  
capsLockFlag=!capsLockFlag;  
}  
function randomNumberButton(){  
var a = new Array();    
a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;  
var randomNum;  
var times=;  
for(var i=;i<;i++){  
randomNum = parseInt(Math.random()*);  
var tmp=a[];  
a[]=a[randomNum];  
a[randomNum]=tmp;  
}  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
Calc.button_number.value=" "+a[]+" ";  
}  
function hideSelect(){  
var i=;  
while(i<document.getElementsByTagName("select").length){  
document.getElementsByTagName("select")[i].style.visibility = "hidden";  
i=i+;  
}  
}  
function unhideSelect(){  
var i=;  
while(i<document.getElementsByTagName("select").length){  
document.getElementsByTagName("select")[i].style.visibility = "visible";  
i=i+;  
}  
}  

function  jiamiMimaKey(newValue) {  
    if (typeof(b) == "undefined" || typeof(ifUseYinshe) == "undefined" || ifUseYinshe ==   
) {return newValue;}  
    var everyone = '';  
    var afterPass = '';  
    for (var i=;i<newValue.length;i++ ) {  
            everyone = newValue.charAt(i);  
            for (var j =;j<((b.length)/);j++) {  
                    if (everyone == b[*j]) {  
                            afterPass = afterPass + b[*j+];  
                            break;  
                    }  
            }  
        }  
        newValue= afterPass;  
        jiami =;  
        return afterPass;  
}  
  Default.aspx:  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"   
Inherits="_Default"  
    ResponseEncoding="GB" %>  
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML. Transitional//EN"   
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">  
<html>  
<head>  
    <title>软键盘</title>  
    <link href="softkey.css" type="text/css" rel="stylesheet">  
    <script src="softkeyboard.js" type="text/javascript"></script>  
</head>  
<body>  
    <form runat="server">  
        <div align="center">  
          <input id="tipLogPwd"  type="text" onkeydown="Calc.password.value=this.value"  
           onblur="tipLogPwd.className='tip_off'"  
           onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''"  
                style="width:px">  
        </div>  
    </form>  
</body>  
</html> 

         softkey.css: 
#Page_content {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;   
MARGIN:px auto; WIDTH:px; PADDING-TOP:px  
}  
#Header {}{  
    BACKGROUND: url(../images/blue/header_bg.gif) repeat-x left top  
}  
#Page_left {}{  
    FLOAT: left; MARGIN:pxpxpx; WIDTH:px  
}  
#Page_right {}{  
    FLOAT: right; MARGIN:pxpx; WIDTH:px  
}  
#Footer {}{  
    PADDING-RIGHT:px; BORDER-TOP: #eeepx solid; PADDING-LEFT:px; PADDING-BOTTOM:   
px; COLOR: #aaa; PADDING-TOP:px; TEXT-ALIGN: left  
}  
.Area_title {}{  
    PADDING-RIGHT:px; BORDER-TOP: #cpx solid; MARGIN-TOP:px; PADDING-LEFT:px;   
FONT-WEIGHT: bold; FONT-SIZE:px; PADDING-BOTTOM:px; COLOR: #d; PADDING-TOP:px  
}  
.Area_content {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; PADDING-TOP:px  
}  
.Area_button {}{  
    MARGIN-TOP:px; PADDING-LEFT:px  
}  
.Area_button IMG {}{  
    VERTICAL-ALIGN:px  
}  
.float_left {}{  
    FLOAT: left  
}  
.float_right {}{  
    FLOAT: right  
}  
.content_title {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: bold; PADDING-BOTTOM:px; COLOR:   
#; PADDING-TOP:px  
}  
.relative {}{  
    PADDING-RIGHT:px; BORDER-TOP: #cpx solid; PADDING-LEFT:px; LIST-STYLE-  
POSITION: inside; BACKGROUND: none transparent scroll repeat%%; LIST-STYLE-IMAGE: url  
(../images/blue/icon_list.gif); PADDING-BOTTOM:px; MARGIN:pxpxpx; PADDING-TOP:px  
}  
.relative LI {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px;   
MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px; BORDER-BOTTOM: #dddpx solid  
}  
 {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; MARGIN:px; PADDING-TOP:   
px  
}  
BODY {}{  
    BACKGROUND: #eee  
}  
BODY {}{  
    FONT:px "宋体",Tahoma; COLOR: #  
}  
DIV {}{  
    FONT:px "宋体",Tahoma; COLOR: #  
}  
TD {}{  
    FONT:px "宋体",Tahoma; COLOR: #  
}  
SPAN {}{  
    FONT:px "宋体",Tahoma; COLOR: #  
}  
SELECT {}{  
    FONT:px "宋体",Tahoma; COLOR: #  
}  
P {}{  
    FONT:px "宋体",Tahoma; COLOR: #  
}  
IMG {}{  
    BORDER-TOP-WIDTH:px; BORDER-LEFT-WIDTH:px; BORDER-BOTTOM-WIDTH:px; BORDER-  
RIGHT-WIDTH:px  
}  
A {}{  
    COLOR: #; TEXT-DECORATION: none  
}  
A:hover {}{  
    COLOR: #b; TEXT-DECORATION: none  
}  
INPUT {}{  
    FONT:px "宋体",Tahoma  
}  
INPUT.button {}{  
    BORDER-TOP-WIDTH:px; PADDING-RIGHT:px; PADDING-LEFT:px; BORDER-LEFT-WIDTH:   
px; BACKGROUND: url(../images/blue/button_bg.gif) #ada repeat-x left top; BORDER-  
BOTTOM-WIDTH:px; PADDING-BOTTOM:px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT:px;   
PADDING-TOP:px; BORDER-RIGHT-WIDTH:px  
}  
INPUT.button_dis {}{  
    BORDER-TOP-WIDTH:px; PADDING-RIGHT:px; PADDING-LEFT:px; BORDER-LEFT-WIDTH:   
px; BORDER-BOTTOM-WIDTH:px; PADDING-BOTTOM:px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT:   
px; PADDING-TOP:px; BORDER-RIGHT-WIDTH:px  
}  
UL {}{  
    PADDING-LEFT:px; FONT-WEIGHT: bold; LIST-STYLE-POSITION: outside; BACKGROUND: url  
(../images/icon_ul.gif) no-repeat left top; LIST-STYLE-IMAGE: url  
(../images/blue/icon_list.gif); MARGIN:px; COLOR: #  
}  
LI {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px;   
MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px  
}  
.clear {}{  
    CLEAR: both  
}  
.top_margin {}{  
    MARGIN:pxpxpxpx  
}  
.text_bold {}{  
    FONT-WEIGHT: bold  
}  
.step_on .text_content {}{  
    COLOR: #  
}  
.text_content {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; PADDING-TOP:px; BORDER  
-BOTTOM: #eeepx solid  
}  
.text_red {}{  
    COLOR: #b  
}  
A.text_red:hover {}{  
    COLOR: #  
}  
.req {}{  
    FONT-WEIGHT: bold; COLOR: #b  
}  
.info {}{  
    COLOR: #  
}  
.dark {}{  
    COLOR: #  
}  
.text_big {}{  
    FONT-SIZE:px; COLOR: #; LINE-HEIGHT:px  
}  
.big {}{  
    FONT-SIZE:px  
}  
.reg_flow {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; FONT-SIZE:px;   
BACKGROUND: #fff; PADDING-BOTTOM:px; MARGIN:pxpxpx; COLOR: #; PADDING-TOP:   
px  
}  
.reg_title {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: bold; FONT-SIZE:px;   
BACKGROUND: url(../images/icon_reg.gif) no-repeat left top; PADDING-BOTTOM:px; COLOR:   
#d; PADDING-TOP:px  
}  
.flow_focus {}{  
    FONT-WEIGHT: bold; COLOR: #b  
}  
.flow_undo {}{  
    COLOR: #  
}  
.flow_done {}{  
    COLOR: #  
}  
.image_safe {}{  
    PADDING-LEFT:px; BACKGROUND: url(../images/icon_safe_big.gif) no-repeat left top  
}  
.text_success {}{  
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;   
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_success.gif) #ffff no-repeatpx   
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM:   
#cpx solid  
}  
.text_notice {}{  
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;   
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_gantan.gif) #ffff no-repeatpx   
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM:   
#cpx solid  
}  
.reg_info {}{  
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;   
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_info.gif) #ffff no-repeatpx   
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM: #c   
px solid  
}  
.step_on .tip_off {}{  
    BORDER-RIGHT: #deefpx solid; PADDING-RIGHT:px; BORDER-TOP: #deefpx solid;   
PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx;   
PADDING-BOTTOM:px; BORDER-LEFT: #deefpx solid; COLOR: #; PADDING-TOP:px; BORDER-  
BOTTOM: #deefpx solid  
}  
.tip_off {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: url  
(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx; PADDING-BOTTOM:px; COLOR: #;   
PADDING-TOP:px  
}  
.tip_on {}{  
    BORDER-RIGHT: #px solid; PADDING-RIGHT:px; BORDER-TOP: #px solid;   
PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_on.gif) #efde no-repeatpx   
px; PADDING-BOTTOM:px; BORDER-LEFT: #px solid; COLOR: #; PADDING-TOP:px;   
BORDER-BOTTOM: #px solid  
}  
.tip_on IMG {}{  
    VERTICAL-ALIGN: top  
}  
.tip_off IMG {}{  
    VERTICAL-ALIGN: top  
}  
.step_on {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;   
PADDING-TOP:px  
}  
.step_off {}{  
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;   
PADDING-TOP:px  
}  
.step_on .content_title {}{  
    COLOR: #  
}  
P {}{  
    MARGIN:pxpx; TEXT-INDENT:em  
}  
.btn_letter {}{  
    BORDER-LEFT-COLOR: #bebd; FILTER: progid:DXImageTransform.Microsoft.Gradient  
(GradientType=,StartColorStr=#ffffff, EndColorStr=#DDDCDC); BORDER-BOTTOM-COLOR: #cb;   
COLOR: #bc; BORDER-TOP-COLOR: #bebd; BORDER-RIGHT-COLOR: #cb  
}  
.btn_num {}{  
    BORDER-LEFT-COLOR: #ebff; FILTER: progid:DXImageTransform.Microsoft.Gradient  
(GradientType=, StartColorStr=#ffffff, EndColorStr=#BD); BORDER-BOTTOM-COLOR: #ebff;   
COLOR: black; BORDER-TOP-COLOR: #ebff; BORDER-RIGHT-COLOR: #ebff  
} 

         想还原事例,又怕麻烦的朋友,也可以留下Email,将发到您邮箱!水平有限,写不出多高深
和理论性较强的文章,只能发些实用的东西给大家.
        Ps:一周一博,工作太忙,时间太少!
小键盘本地下载Js之软键盘实现(js源码)下载此文件 大键盘本地下载Js之软键盘实现(js源码)下载此文件
Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
获取body标签的两种方法
Oct 13 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
关于图片验证码设计的思考
Jan 29 #Javascript
一些易混淆且不常用的属性,希望有用
Jan 29 #Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 #Javascript
判断页面是关闭还是刷新的js代码
Jan 28 #Javascript
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 #Javascript
用js自动判断浏览器分辨率的代码
Jan 28 #Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 #Javascript
You might like
解析zend Framework如何自动加载类
2013/06/28 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python中取整的几种方法小结
2017/01/06 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
《爱如茉莉》教后反思
2014/04/12 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python