html 树形怎么实现键盘上下左右切换用JS 实现

图片说明

 window.onload = function() {
    var oBox = document.getElementById("box");
    var bLeft = bTop = bRight = bBottom = bCtrlKey = false;
    setInterval(function() {
        if (bLeft) {
            oBox.style.left = oBox.offsetLeft - 10 + "px"
        } else if (bRight) {
            oBox.style.left = oBox.offsetLeft + 10 + "px"
        }
        if (bTop) {
            oBox.style.top = oBox.offsetTop - 10 + "px"
        } else if (bBottom) {
            oBox.style.top = oBox.offsetTop + 10 + "px"
        }
        limit();
    },
    30);
    document.onkeydown = function(event) {
        var event = event || window.event;
        bCtrlKey = event.ctrlKey;
        switch (event.keyCode) {
        case 37:
            bLeft = true;
            break;
        case 38:
            if (bCtrlKey) {
                var oldWidth = oBox.offsetWidth;
                var oldHeight = oBox.offsetHeight;
                oBox.style.width = oBox.offsetWidth * 1.5 + "px";
                oBox.style.height = oBox.offsetHeight * 1.5 + "px";
                oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
                oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
                break;
            }
            bTop = true;
            break;
        case 39:
            bRight = true;
            break;
        case 40:
            if (bCtrlKey) {
                var oldWidth = oBox.offsetWidth;
                var oldHeight = oBox.offsetHeight;
                oBox.style.width = oBox.offsetWidth * 0.75 + "px";
                oBox.style.height = oBox.offsetHeight * 0.75 + "px";
                oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
                oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
                break;
            }
            bBottom = true;
            break;
        case 49:
            bCtrlKey && (oBox.style.background = "green");
            break;
        case 50:
            bCtrlKey && (oBox.style.background = "yellow");
            break;
        case 51:
            bCtrlKey && (oBox.style.background = "blue");
            break;
        }
        return false
    };
    document.onkeyup = function(event) {
        switch ((event || window.event).keyCode) {
        case 37:
            bLeft = false;
            break;
        case 38:
            bTop = false;
            break;
        case 39:
            bRight = false;
            break;
        case 40:
            bBottom = false;
            break;
        }
    };
    function limit() {
        var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] oBox.offsetLeft <= 0 && (oBox.style.left = 0);
        oBox.offsetTop <= 0 && (oBox.style.top = 0);
        doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px");
        doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px")
    }
};

= bRight = bBottom = bCtrlKey = false; setInterval(function () { if (bLeft) { oBox.style.left = oBox.offsetLeft - 10 + "px" } else if (bRight) { oBox.style.left = oBox.offsetLeft + 10 + "px" } if (bTop) { oBox.style.top = oBox.offsetTop - 10 + "px" } else if(bBottom) { oBox.style.top = oBox.offsetTop + 10 + "px" } //防止溢出 limit(); },30); document.onkeydown = function (event) { var event = event || window.event; bCtrlKey = event.ctrlKey; switch (event.keyCode) { case 37: bLeft = true; break; case 38: if(bCtrlKey) { var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight; oBox.style.width = oBox.offsetWidth * 1.5 + "px"; oBox.style.height = oBox.offsetHeight * 1.5 + "px"; oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; break; } bTop = true; break; case 39: bRight = true; break; case 40: if(bCtrlKey) { var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight; oBox.style.width = oBox.offsetWidth * 0.75 + "px"; oBox.style.height = oBox.offsetHeight * 0.75 + "px"; oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; break; } bBottom = true; break; case 49: bCtrlKey && (oBox.style.background = "green"); break; case 50: bCtrlKey && (oBox.style.background = "yellow"); break; case 51: bCtrlKey && (oBox.style.background = "blue"); break; } return false }; document.onkeyup = function (event) { switch ((event || window.event).keyCode) { case 37: bLeft = false; break; case 38: bTop = false; break; case 39: bRight = false; break; case 40: bBottom = false; break; } }; //防止溢出 function limit() { var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] //防止左侧溢出 oBox.offsetLeft <=0 && (oBox.style.left = 0); //防止顶部溢出 oBox.offsetTop <=0 && (oBox.style.top = 0); //防止右侧溢出 doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px"); //防止底部溢出 doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px") } };

ase 39: bRight = false; break; case 40: bBottom = false; break; } }; //防止溢出 function limit() { var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] //防止左侧溢出 oBox.offsetLeft <=0 && (oBox.style.left = 0); //防止顶部溢出 oBox.offsetTop <=0 && (oBox.style.top = 0); //防止右侧溢出 doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px"); //防止底部溢出 doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px") } };

var oldWidth = oBox.offsetWidth;
var oldHeight = oBox.offsetHeight;
oBox.style.width = oBox.offsetWidth * 0.75 + "px";
oBox.style.height = oBox.offsetHeight * 0.75 + "px";
oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
break;

通过创建一个event.keyCode对象，有获取键盘上的方向键，运行代码后，点击键盘上的任意方向键。代码如下：

取得键盘的方向键

请按方向键←↑→↓

如不能显示效果，按Ctrl+F5刷新。

写了个最简单的不要嘲笑我哦代码压缩了一下是个html文件用了jquery

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible"content="IE=edge"><![endif]--><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta name="generator"content=""><title>test 1.0</title><script type="text/javascript"src="./jquery.js"></script><style type="text/css">#main-div{height:280px;width:500px;margin:0 auto;text-align:center}.top{height:15%;width:100%;background-color:blue}.middle{height:70%;width:100%;background-color:yellow}.under{height:15%;width:100%;background-color:blue}.middle-left{background-color:black;height:100%;width:25%;float:left;margin-left:2.5%}.middle-right{background-color:#fff;height:100%;width:70%;float:left}button{width:100px;margin:10px 0px 10px 0px;background-color:#fff;border:#fff 1px solid;border-radius:10px}.onactive{background-color:#f50;border:1px solid#f50;color:#fff}span{color:#fff;font-size:10px}</style></head><body><div id="main-div"><div class="top"><button event="1-1"class="onactive">上1</button><button event="1-2">上2</button><button event="1-3">上3</button></div><div class="middle"><div class="middle-left"><button event="2-1">中1</button><button event="2-2">中2</button><button event="2-3">中3</button></div><div class="middle-right"></div></div><div class="under"><span>上下左右操控按钮按回车显示当前按钮属性</span><button event="3-1">下1</button><button event="3-2">下2</button></div></div></body><script type="text/javascript">$(function(){$(document).keydown(function(event){var upEle=$(".onactive");var ev=upEle.attr("event");switch(event.keyCode){case 37:movEvent(upEle,1);break;case 38:movEvent(upEle,2);break;case 39:movEvent(upEle,3);break;case 40:movEvent(upEle,4);break;case 13:alertMsg();break}});function movEvent(upEle,mo){var ev=upEle.attr("event");var num=ev.split("-");var first=parseInt(num[0]);var second=parseInt(num[1]);upEle.removeClass("onactive");switch(mo){case 1:if(first==1){if(second==1){second=3}else{second-=1}}else if(first==2){if(second==1){second=3}else{second-=1}}else if(first==3){if(second==1){second=2}else{second-=1}}break;case 2:if(first==1){first=3;second=1}else if(first==2){if(second==1){first=1;second=1}else{first=2;second-=1}}else if(first==3){first=2;second=3}break;case 3:if(first==1){if(second==3){second=1}else{second+=1}}else if(first==2){if(second==3){second=1}else{second+=1}}else if(first==3){if(second==2){second=1}else{second+=1}}break;case 4:if(first==1){first=2;second=1}else if(first==2){if(second==3){first=3;second=1}else{first=2;second+=1}}else if(first==3){first=1;second=1}break}$("button[event='"+first+"-"+second+"']").addClass("onactive")}function alertMsg(){var activeButton=$(".onactive");var str="选中的按钮为 <"+activeButton.text()+"> 按钮的event属性为"+activeButton.attr("event");alert(str)}});</script></html>

这里有一思路

这里假设你可以通过点击事件选择按钮。
1. 为dom设置键盘事件监听
2. 若输入的是方向键，则if判断执行不同的操作
3. 这种操作实则是**模拟点击事件**实行的，比如你输入右方向键，则模拟点一下右边的按钮

代码

window.onload = function() {
        document.addEventLister('keydown', function(e) {
                if (e.keyCode === 37) { // left
                        // some behaviors
                } else if (e.keyCode === 38) { // up
                        // some behaviros
                } else if (e.keyCode === 39) { // right
                        // ...
                } else if (e.keyCode ===40) { // down
                        // ...
                } else { // defaule
                      return;
                }
        })
}

问：如果我不是通过点击事件模拟呢？

答：其实思想都是一致的，实际上都是更改数据，反馈给用户。

html 树形怎么实现 键盘上下左右 切换 用JS 实现

这里有一思路

代码

问：如果我不是通过点击事件模拟呢？

html 树形怎么实现键盘上下左右切换用JS 实现