使用键盘控制元素的移动、大小以及颜色的变化

来源：互联网发布：微商的发展趋势知乎编辑：程序博客网时间：2024/06/07 13:57

效果预览：

html部分：

<div class="box1">    <h1>        使用方向键控制图形的移动；<br>        使用ctrl + “+/-”控制图形的大小；<br>        ctrl +1/2/3/4/5/6/7改变div的颜色（共七种颜色）；<br>    </h1>    <div id="btn">        重置    </div></div><div id="box2">    <div id="div1"></div></div>

css部分：

<style>        .box1{            height: 200px;            text-align: center;        }        h1{            font: 500 15px/20px 宋体;            color: #971b2b;        }        #btn {            height: 30px;            width: 70px;            line-height: 30px;            text-align: center;            background: #e4b43e;            color: #ffffff;            cursor: pointer;            display: inline-block;        }        #btn:hover{            background: #daa20f;        }        #box2{            height: 700px;            width: 100%;            position: relative;            border: 1px solid #888888;        }        #div1{            height: 50px;            width: 50px;            position: absolute;            background: #29b3ee;        }    </style>

javascript部分：

  <script>        window.onload = function () {            var oDiv = document.getElementById('div1');            var oBox2 = document.getElementById('box2');            var oBtn = document.getElementById('btn');            var oWidth = parseInt(getStyle(oBox2, 'width'));            var aColor = ['red','orange','yellow','green','cyan','blue','purple'];//            方向键控制图形的移动方向////            第一种方法：图形正在移动时会有间隔 不流畅////            document.onkeydown = function (ev) {//                var ev = ev||event;////                switch (ev.keyCode){//                    case 37://                        oDiv.style.left = oDiv.offsetLeft - 10 + 'px';//                        break;//                    case 38://                        oDiv.style.top = oDiv.offsetTop - 10 + 'px';//                        break;//                    case 39://                        oDiv.style.left = oDiv.offsetLeft + 10 + 'px';//                        break;//                    case 40://                        oDiv.style.top = oDiv.offsetTop + 10 + 'px';//                        break;//                }//                rangeFn();////            }            //第二种方法 采用定时器解决图形移动不流畅的问题            var key = {l: null, r: null, t: null, b: null};            setInterval(function () {                if (key.l) {                    oDiv.style.left = oDiv.offsetLeft - 5 + 'px';                }                if (key.r) {                    oDiv.style.left = oDiv.offsetLeft + 5 + 'px';                }                if (key.b) {                    oDiv.style.top = oDiv.offsetTop + 5 + 'px';                }                if (key.t) {                    oDiv.style.top = oDiv.offsetTop - 5 + 'px';                }                rangeFn();            }, 13)            document.onkeydown = function (ev) {                var ev = ev || event;                var oDivHeight = parseInt( getStyle(oDiv,'height') );                var oDivWidth =parseInt(  getStyle(oDiv,'width') );                switch (ev.keyCode) {                    case 37 :                        key.l = true;                        break;                    case 38 :                        key.t = true;                        break;                    case 39 :                        key.r = true;                        break;                    case 40 :                        key.b = true;                        break;                    // ctrl +1/2/3/4/5/6/7改变div的颜色                    case 49:                        ev.ctrlKey && ( oDiv.style.background = aColor[0]  );                        break;                    case 50:                        ev.ctrlKey && ( oDiv.style.background = aColor[1] );                        break;                    case 51:                        ev.ctrlKey && ( oDiv.style.background = aColor[2] );                        break;                    case 52:                        ev.ctrlKey && ( oDiv.style.background = aColor[3] );                        break;                    case 53:                        ev.ctrlKey && ( oDiv.style.background = aColor[4] );                        break;                    case 54:                        ev.ctrlKey && ( oDiv.style.background = aColor[5] );                        break;                    case 55:                        ev.ctrlKey && ( oDiv.style.background = aColor[6] );                        break;                        //ctrl + +/-改变div的大小                    case 187:                        if (ev.ctrlKey) {                            oDiv.style.width = oDivWidth + 10 + "px";                            oDiv.style.height = oDivHeight + 10 + "px";                        }                        break;                    case 189:                        if (ev.ctrlKey) {                            oDiv.style.width = oDivWidth - 10 + "px";                            oDiv.style.height = oDivHeight - 10 + "px";                        }                        break;                }                //阻止浏览器的默认行为                return false            };            document.onkeyup = function (ev) {                    var ev = ev || event;                    switch (ev.keyCode) {                        case 37 :                            key.l = false;                            break;                        case 38 :                            key.t = false;                            break;                        case 39 :                            key.r = false;                            break;                        case 40 :                            key.b = false;                            break;                    }                };//重置            oBtn.onclick = function () {                oDiv.style.background = '#29b3ee';                oDiv.style.width = '50px';                oDiv.style.height = '50px';                oDiv.style.left = '0';                oDiv.style.top = '0';            };            //控制图形移动的范围的函数            function rangeFn() {                if (parseInt(oDiv.style.left) < 0){                    oDiv.style.left = '0px';                }                if (parseInt(oDiv.style.top) < 0){                    oDiv.style.top = '0px';                }                if (parseInt(oDiv.style.top) > 650){                    oDiv.style.top = '650px';                }                if ( parseInt(oDiv.style.left) > oWidth-50 ){                    oDiv.style.left = oWidth - 50 + 'px';                }            }            function getStyle(obj, attr) {                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];            }        }    </script>

总结：

想了好久还是解决不了控制元素大小的范围的问题。

阅读全文

0 0