JS傍受キーボードの二つの結合キーがトリガするイベント

14008 ワード

/span>html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>    title>
    <script>
        window.onload=function(){
            var div = document.getElementsByTagName("div")[0];
            //          
            var key1 = 0;
            var key2 = 0;
            //      
            document.onkeyup = function(){
                 key1 = 0;
                 key2 = 0;
            }
            //    
            document.onkeydown=function(e){
                var e = window.event||e;
                var x = parseInt(div.style.left);
                var y = parseInt(div.style.top);
                //        
                if(key1 == 0){
                    key1 = e.keyCode;
                }else{
                    key2 = e.keyCode;
                }
                //   
                if(e.keyCode==37){//
                  // alert("11 ");
                    x-=5;
                }else if(e.keyCode==38){//
                  // alert("22 ");
                    y-=5;
                }else if(e.keyCode==39){//
                 //  alert("33 ");
                    x+=5;
                }else if(e.keyCode==40){//
                  //alert("44 ");
                   y+=5;
                }
                //   
                if((key1==37 &&key2==38)||(key1==38 &&key2==37)){//  
                //alert("  ");
                        x-=5;
                        y-=5;
                }else if((key1==39 &&key2==38)||(key1==38 &&key2==39)){//  
                //alert("  ");
                        x+=5;
                        y-=5;
                }else if((key1==40 &&key2==37)||(key1==37 &&key2==40)){//  
               // alert("  ");
                        x-=5;
                        y+=5;
                }else if((key1==39 &&key2==40)||(key1==40 &&key2==39)){//  
                //alert("  ");
                        x+=5;
                        y+=5;
                }
                //  
                div.style.left=x+"px";
                div.style.top=y+"px";
            }
        }
    script>
head>
<body>
<div style="width:100px;height:100px;position: absolute; left:700px;top:100px;background-color: red;">div>
body>
html>