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 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JS交换变量的方法
Jan 21 Javascript
javascript如何创建对象
Aug 29 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
关于图片验证码设计的思考
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
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python常用正则表达式符号浅析
2014/08/13 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python实现的文件同步服务器实例
2015/06/02 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python定义一个函数的方法
2020/06/15 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
error和exception有什么区别
2012/10/02 面试题
教师试用期自我鉴定
2014/02/12 职场文书
环保建议书300字
2014/05/14 职场文书
环保志愿者活动总结
2014/06/27 职场文书
购房协议书范本
2014/10/02 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL