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中的函数
Jan 22 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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的加密方式及原理
2012/06/14 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python语言使用技巧分享
2016/05/31 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python 类的特殊成员解析
2018/06/20 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python实现一组典型数据格式转换
2018/12/15 Python
在Python中使用Neo4j的方法
2019/03/14 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
超级实用的8个Python列表技巧
2020/08/24 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
企业申诉管理制度
2014/01/30 职场文书
公司离职证明样本
2014/09/13 职场文书
党员先进事迹材料
2014/12/19 职场文书
Redis数据同步之redis shake的实现方法
2022/04/21 Redis