首页 > 代码库 > 页面上有一个div 100*100 颜色为黄色 按键盘上下左右键可以操作div移动 ctrl+键盘上下键可以放大缩小 ctrl+键盘左右键可以随机变颜色
页面上有一个div 100*100 颜色为黄色 按键盘上下左右键可以操作div移动 ctrl+键盘上下键可以放大缩小 ctrl+键盘左右键可以随机变颜色
1 <body> 2 <div id="w"> 3 <div class="n">按上键可以向上移动</div> 4 <div class="n">按下键可以向下移动</div> 5 <div class="n">按左键可以向左移动</div> 6 <div class="n">按右键可以向右移动</div> 7 <div class="n">ctrl+键盘上键可以放大</div> 8 <div class="n">ctrl+键盘下键可以缩小</div> 9 <div class="n">ctrl+键盘左右键可以随机变颜色</div> 10 <div id="box" style="width: 100px;height: 100px;background-color: #ff0;position: absolute;left: 100px;top: 100px; z-index: -1"></div> 11 </div> 12 <script> 13 var box = document.getElementById(‘box‘); 14 document.body.addEventListener(‘keydown‘, function (e) { 15 switch (e.keyCode) { 16 case 37: 17 if (e.ctrlKey) { 18 box.style.backgroundColor = ‘#‘ + (Math.random().toString(16)).substr(-6); 19 } else { 20 box.style.left = parseInt(box.style.left) - 6 + ‘px‘; 21 } 22 break; 23 case 39: 24 if (e.ctrlKey) { 25 box.style.backgroundColor = ‘#‘ + (Math.random().toString(16)).substr(-6); 26 } else { 27 box.style.left = parseInt(box.style.left) + 6 + ‘px‘; 28 } 29 break; 30 case 38: 31 box.style.top = parseInt(box.style.top) - 6 + ‘px‘; 32 if (e.ctrlKey) { 33 box.style.width = parseInt(box.style.width) + 4 + ‘px‘; 34 box.style.left = parseInt(box.style.left) - 2 + ‘px‘; 35 box.style.height = parseInt(box.style.height) + 4 + ‘px‘; 36 box.style.top = parseInt(box.style.top) + 4 + ‘px‘; 37 } 38 break; 39 case 40: 40 box.style.top = parseInt(box.style.top) + 6 + ‘px‘; 41 if (e.ctrlKey) { 42 box.style.width = parseInt(box.style.width) - 4 + ‘px‘; 43 box.style.left = parseInt(box.style.left) + 2 + ‘px‘; 44 box.style.height = parseInt(box.style.height) - 4 + ‘px‘; 45 box.style.top = parseInt(box.style.top) - 4 + ‘px‘; 46 } 47 break; 48 } 49 console.log(e.keyCode); 50 }) 51 </script> 52 </body>
页面上有一个div 100*100 颜色为黄色 按键盘上下左右键可以操作div移动 ctrl+键盘上下键可以放大缩小 ctrl+键盘左右键可以随机变颜色
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。