[读码时间]用键盘控制div

说明：代码取自网络，CSS注释为笔者学习时添加，JS中注释为原文所有！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>用键盘控制div</title>
    <style>
        html,body{
            overflow:hidden;
        }
        body{
            margin:0;
            padding:0;
        }
        pre{
            color:green;
            padding:10px 15px;
            background:#f0f0f0;/*白色*/
            border:1px dotted #333;/*黑色*/
            font:12px/1.5 Courier New;/*行高18px*/
            margin:12px;
        }
        span{
            color:#999;/*灰黑色*/
        }
        #box{
            position:absolute;
            top:50px;
            left:300px;
            width:100px;
            height:100px;
            background:red;
        }
    </style>
    <script>
        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")
            }
        };
    </script>
</head>
<body>
    <pre>
        红色方块为键盘操作区域，您可以进行如下操作：
上：↑ 下：↓ 左：← 右：→
Ctrl + 1 : 背景变为绿色
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小
</pre>
    <div id="box"></div>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sx00xs/p/6488021.html