主要代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>键盘对应数字</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var x=0;
function a1(){
    x=x+1;
    //alert(x);
    document.getElementById("num1").value=x;
    var tt1=document.getElementById("t1");
    var tt2=document.getElementById("t2");
    tt2.value=event.keyCode;
    //var texts1=document.getElementById("text1");
    //texts1.value=tt1.value+"--"+tt2.value;
    //document.getElementById("text1").value=tt1.value+"--"+tt2.value;
    if(tt2.value=="8"){
            tt1.value="BackSpace"
            }else if(tt2.value=="9"){
            tt1.value="Tab"
            }else if(tt2.value=="13"){
            tt1.value="Enter"
            }else if(tt2.value=="16"){
            tt1.value="Shift"
            }else if(tt2.value=="17"){
            tt1.value="Ctrl"
            }else if(tt2.value=="18"){
            tt1.value="Alt"
            }else if(tt2.value=="20"){
            tt1.value="CapsLpck"
            }else if(tt2.value=="27"){
            tt1.value="Esc"
            }else if(tt2.value=="32"){
            tt1.value="Space"
            }else if(tt2.value=="33"){
            tt1.value="PgUp+"
            }else if(tt2.value=="34"){
            tt1.value="PgUp- "
            }else if(tt2.value=="35"){
            tt1.value="End"
            }else if(tt2.value=="36"){
            tt1.value="Home"
            }else if(tt2.value=="37"){
            tt1.value="←"
            }else if(tt2.value=="38"){
            tt1.value="↑"
            }else if(tt2.value=="39"){
            tt1.value="→"
            }else if(tt2.value=="40"){
            tt1.value="↓"
            }else if(tt2.value=="44"){
            tt1.value="PrtScr"
            }else if(tt2.value=="45"){
            tt1.value="Ins"
            }else if(tt2.value=="46"){
            tt1.value="Del"
            }else if(tt2.value=="80"){
            tt1.value="P/屏幕管理"
            }else if(tt2.value=="91"){
            tt1.value="Win"
            }else if(tt2.value=="93"){
            tt1.value="Right Click"
            }else if(tt2.value=="107"){
            tt1.value="+"
            }else if(tt2.value=="109"){
            tt1.value="'-'"
            }else if(tt2.value=="106"){
            tt1.value="*"
            }else if(tt2.value=="111"){
            tt1.value="/"
            }else if(tt2.value=="112"){
            tt1.value="F1"
            }else if(tt2.value=="113"){
            tt1.value="F2"
            }else if(tt2.value=="114"){
            tt1.value="F3"
            }else if(tt2.value=="115"){
            tt1.value="F4"
            }else if(tt2.value=="116"){
            tt1.value="F5"
            }else if(tt2.value=="117"){
            tt1.value="F6"
            }else if(tt2.value=="118"){
            tt1.value="F7"
            }else if(tt2.value=="119"){
            tt1.value="F8"
            }else if(tt2.value=="120"){
            tt1.value="F8"
            }else if(tt2.value=="121"){
            tt1.value="F10"
            }else if(tt2.value=="122"){
            tt1.value="F11"
            }else if(tt2.value=="123"){
            tt1.value="F12"
            }else if(tt2.value=="144"){
            tt1.value="Num"
            }else if(tt2.value=="173"){
            tt1.value="启用/关闭声音"
            }else if(tt2.value=="174"){
            tt1.value="减小声音"
            }else if(tt2.value=="175"){
            tt1.value="增大声音"
            }else if(tt2.value=="192"){
            tt1.value="~"
            }else if(tt2.value=="255"){
            tt1.value="启用/关闭触摸板功能"
            }
        //添加p标签
        $("#text1").append("<p style='width:110px;height:20px;float:left;'>"+tt1.value+'--'+tt2.value+"</p>");
        //第一个文本框输出一次置空一次
        $("#t1").val("");
        //第二个文本框根据第一个文本框输出
        $("#t2").val();
    }
</script>
</head>
<style>
#text1{
    height:400px;
    width:100%;
    overflow:scroll;
}
#num1{
    width:30px;
    font-size:18px;
    text-align:center;
}
</style>

<body onkeyup="a1()">                       <!--焦点-->
输入键盘上任意数字：<input type="text" id="t1" autofocus="autofocus"/>
                                            <!--禁止输入-->
对应的键盘按键数字：<input type="text" id="t2" readonly="readonly"/>
当前第<input type="text" id="num1"/>次<br />
<h2>记录</h2>
<div onkeydown="a1()" id="text1"></div>
</body>
</html>

倒序排列关键代码

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    </head>  
    <body>  
        <div class="outerdiv">  
            <div>01</div>  
            <div>02</div>  
            <div>03</div>  
        </div>  
        <script type="text/javascript">  
            /*jquery写法*/  
            $(".outerdiv div").each(function(){  
                $(this).prependTo(".outerdiv");
            })
            /*javascript原生倒叙排列
            var index = document.querySelectorAll(".outerdiv div");  
            for(var i=index.length-1;i>-1;i--){  
                document.querySelector(".outerdiv").appendChild(index[i]);  
            }    */
        </script>  
    </body>  
</html>

键位对应的数字以及倒序排列

主要代码

倒序排列关键代码

猜你喜欢