原生js小球随键盘移动事件小案例

科技2022-07-15 118

原生js 小球随键盘移动事件小案例

1效果图2html和js3css4总结

1效果图

2html和js

<body> <div id="ball"></div> <script> // 获取小球 var ball = document.getElementById('ball'); // 设置小球移动的步径 var step = 2; // 设置定时器标志 var run = false; // runing 计时器返回的标志 var runing; /* 通过上下左右键控制小球在对应的方向进行移动键按下，走;抬起，停 */ window.onkeydown = function(e){ // 判断按下的键 // console.log(e); // e.keyCode 返回的按键对应的数字 // 对不同的键，使用不同的移动方式 switch(e.keyCode){ // 向左移动 case 37: moveLeft(); break; // 向上移动 case 38: moveTop(); break; // 向右移动 case 39: moveRight(); break; // 向下移动 case 40: moveBottom(); break; } } // 当键盘抬起时停止计时器 window.onkeyup = function(){ // 清除计时器 clearInterval(runing); // 将定时器的标志变成false run = false; } // 声明向左移动的函数 function moveLeft(){ // 判断定时器是否存在 if(run){ return; } runing = setInterval(function(){ // 将标志设置为true run = true; // 获取当前值 var l = ball.offsetLeft; ball.style.left = (l - step)+'px'; },10); } // 声明向右移动的函数 function moveRight(){ // 计时器叠加会造成特殊效果 // 不能持续按下时或者每一回按下时，都启动一个定时器 // 判断是否已经有了一个定时器 // 如果已经有了定时器，那么我终止 // 如果run 现在是true,不用再启动了 if(run){ return; } // 设置定时器 runing = setInterval(function(){ run = true; // 获取当前值 var l = ball.offsetLeft; ball.style.left = (l + step)+'px'; },10); } // 向上移动的函数 function moveTop(){ // 判断当前是否有定时器 if(run){ return; } // 启动定时器 runing = setInterval(function(){ // 设置已经启动的标志 run = true; var t = ball.offsetTop; ball.style.top = (t-step)+'px'; },10); } // 向下移动的函数 function moveBottom(){ // 判断当前是否有定时器 if(run){ return; } // 启动定时器 runing = setInterval(function(){ // 设置已经启动的标志 run = true; var t = ball.offsetTop; ball.style.top = (t+step)+'px'; },10); } </script> </body>

3css

<head> <meta charset="UTF-8"> <title>上下左右</title> <style> * { margin: 0px; padding: 0px; } #ball { width: 100px; height: 100px; background: purple; border-radius: 50px; position: absolute; } </style> </head>

4总结

点击小键盘的上线左右可移动小球

Processed: 0.011, SQL: 8