• 技术文章 >web前端 >js教程

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

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

    效果还原: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="";
    document.write(style);


    document.write("
    style=\"position:absolute; left:px; top:px; width:px; z-index:;display:none\">id=\"CalcTable\" width=\"\" border=\"\" align=\"center\" cellpadding=\"\" cellspacing=\"
    \" bgcolor=\"\">align=\"center\">
    class=\"table_title\" align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor:
    default;height:\">name=action> 博客园
    密码输入器
               &n
    bsp     value=\"使用键盘输入\" bgtype=\"\" onclick=\"password.readOnly=;password.focus
    ();closekeyboard();password.value='';\">
    \" border=\"\" cellspacing=\"\" cellpadding=\"\">\n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \n\n\n\n\n\n\n\n\n\n\n\n \n \n\n
    \"> \"> \"> \">\">\"> \"> 格\" onclick=\"setpassvalue();\" onDblClick=\"setpassvalue();\"
    style=\"width:px;height:px\"> \n
    name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" type=button value=\" \"> \"> \">
    value=\" q \"> value=\" e \"> value=\" t \"> value=\" u \"> value=\" o \">
    		\"> \">onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\"
    style=\"width:px;\">
    type=button value=\" a \"> type=button value=\" d \"> type=button value=\" g \"> type=button value=\" j \"> \"> name=\"button\" type=button value=\" : \"> value=\" " \"> type=button value=\" ' \"> type=button onclick=\"OverInput();\" value=\" 确定 \"
    style=\"width:px;height:px;\">
    value=\" x \"> value=\" v \"> value=\" n \"> value=\" < \"> \"> type=button value=\" ? \"> type=button value=\" . \"> \">
    ");

    function addValue(newValue)
    {
    if (CapsLockValue==)
    {
    var str=Calc.password.value;
    if(str.length{
    Calc.password.value += newValue;
    }
    if(str.length<=password.maxLength)
    {
    password.value=Calc.password.value;
    }
    }
    else
    {
    var str=Calc.password.value;
    if(str.length{
    //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{
    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{
    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{
    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(idocument.getElementsByTagName("select")[i].style.visibility = "hidden";
    i=i+;
    }
    }

    function unhideSelect(){
    var i=;
    while(idocument.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 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" %>

    "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">


    软键盘






    onblur="tipLogPwd.className='tip_off'"
    onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''"
    style="width:px">





    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:一周一博，工作太忙，时间太少！
    小键盘本地下载下载文件 下载此文件 大键盘本地下载下载文件 下载此文件
    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    专题推荐：Js之软键盘实现(js源码)
    上一篇：用JavaScript和注册表脚本实现右键收藏Web页选中文本_javascript技巧 下一篇：关于图片验证码设计的思考_广告代码
    PHP编程就业班

    相关文章推荐

    • es6中怎么将数组转为对象• es6怎么判断变量是不是数组• 实例图文详解在JavaScript中实现队列• javascript定义函数的几种类型是什么• es6怎么判断数组是否含有相同的值

    全部评论我要评论

  • 取消发布评论发送
    • 1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载