[js] 小案例---键盘事件（随着上下左右键移动元素）

通过 键盘按键 控制 p标签的位移

• 上按键 38 p标签 top 累减 数值
• 下按键 40 p标签 top 累加 数值
• 左按键 37 p标签 left 累减 数值
• 右按键 39 p标签 left 累加 数值

数值的改变 应该是 在 原始数值基础上完成的

极值的设定:
- 最小值是 0
- 最大值是 父级标签占位(内容+padding) - 当前标签占位(内容+padding+border)
clientWidth clientHeight offsetWidth offsetHeight

<div>
        <p></p>
    </div>

*{
            margin: 0;
            padding: 0;
        }

        div{
            width: 300px;
            height: 300px;
            border: 3px solid #000;
            margin: 50px auto;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:20px;
        }
        p{
            width: 30px;
            height: 30px;
            background: pink;
            position: absolute;
            padding: 20px;
            border: 5px solid red;
        }

// 获取标签对象
        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');

        // 获取 p标签对象 原始定位数据  parseInt(10px) = 10
        var leftVal = parseInt( window.getComputedStyle(oP).left ) ; 
        var topVal = parseInt( window.getComputedStyle(oP).top ) ; 

        // 获取 p标签对象 内容+padding+border
        var oPWidth = oP.offsetWidth;
        var oPHeight = oP.offsetHeight;

        // 获取 div标签对象 内容+padding
        var oDivWidth = oDiv.clientWidth;
        var oDivHeight = oDiv.clientHeight;

        // 给 document 添加 键盘事件
        document.addEventListener( 'keydown' , function(e){
            // console.log( e.keyCode );
            if( e.keyCode === 37 ){
                // 按键编号 是 37 按 左键
                // left  减等 数值 
                leftVal -= 10 ;

                // 设定极值 左移 最小坐标是 0 
                if( leftVal <= 0 ){
                    leftVal = 0 ;
                }

                // 将数值 赋值给 标签的定位属性
                oP.style.left = leftVal + 'px';
            
            }else if( e.keyCode === 39 ){
                // 按键编号 是 39 按 右键
                // left  加等 数值 
                leftVal += 10 ;

                // 设定极值 左移 最大坐标是 div占位(内容+padding) - p占位(内容+padding+border)
                if( leftVal > oDivWidth - oPWidth  ){
                    leftVal = oDivWidth - oPWidth ; 
                }

                // 将数值 赋值给 标签的定位属性
                oP.style.left = leftVal + 'px';

            }else if( e.keyCode === 38 ){
                // 按键编号 是 38 按 上键
                // top  减等 数值 
                topVal -= 10 ;

                // 设定极值 上移 最小坐标是 0
                if( topVal < 0  ){
                    topVal = 0; 
                }

                // 将数值 赋值给 标签的定位属性
                oP.style.top = topVal + 'px';

            }else if( e.keyCode === 40 ){
                // 按键编号 是 40 按 下键
                // top  加等 数值 
                topVal += 10 ;

                // 设定极值 左移 最大坐标是 div占位(内容+padding) - p占位(内容+padding+border)
                if( topVal > oDivHeight - oPHeight ){
                    topVal = oDivHeight - oPHeight ; 
                }

                // 将数值 赋值给 标签的定位属性
                oP.style.top = topVal + 'px';
            }
        })

用到了之前写的​​offsetWidth offsetHeight clientWidth clientHeight offsetTop offsetLeft​​​

也可以使用​​oP.offsetLeft;​​​代替​​parseInt( window.getComputedStyle(oP).left )​​

var oDiv = document.querySelector('div')
        var oP = document.querySelector('p')
        
        var oPLeft = oP.offsetLeft;
        var oDivWidth = oDiv.clientWidth;
        var oPWidth = oP.offsetWidth;

        var oPTop = oP.offsetTop;
        var oDivHeight = oDiv.clientHeight;
        var oPHeight = oP.offsetHeight;

        document.addEventListener('keydown',function(event){
            console.log(event.keyCode)
            // 左
            if(event.keyCode===37){
                oPLeft-=10
                oPLeft = oPLeft<=0?0:oPLeft
                oP.style.left = oPLeft+'px'

            }
            // 上
            if(event.keyCode===38){
                oPTop-=10
                oPTop = oPTop<=0?0:oPTop
                oP.style.top = oPTop+'px'
            }
            
            // 右
            if(event.keyCode===39){
                oPLeft+=10
                oPLeft = oPLeft>oDivWidth-oPWidth?oDivWidth-oPWidth:oPLeft;
                oP.style.left = oPLeft+'px'

            }
            // 下
            if(event.keyCode===40){
                oPTop+=10
                oPTop = oPTop>oDivHeight-oPHeight?oDivHeight-oPHeight:oPTop;
                oP.style.top = oPTop+'px'
            }
        })