JavaScript 实现HTML元素持续按键移动教程

// 示例：使用 keyup 无法实现持续移动 let myCircle = document.querySelector('.ball'); // 假设 myCircle 已经定位 // myCircle.style.position = 'absolute'; // myCircle.style.left = '0px';  window.addEventListener('keyup', (event) => {     if (event.key === 'ArrowLeft') {         // 这段代码只会在 'ArrowLeft' 键被释放时执行一次         myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';     } });

// 示例：使用 while 循环导致浏览器卡死 window.addEventListener('keyup', (event) => {     if (event.key === 'ArrowLeft') {         let key_left = true; // 在这里设置一个局部变量         while (key_left) {             // 这将导致一个无限循环，阻塞主线程             // 浏览器会无响应甚至崩溃             myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';             // 实际上，这里没有机制能让 key_left 变为 false             // 即使有，这种同步的、高频的 dom 操作也会导致性能问题         }     } });

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

// HTML 结构示例： // <div class="ball" style="width:50px; height:50px; background-color:red;"></div>  // JavaScript 代码： let myCircle = document.querySelector('.ball');  // 页面加载时初始化元素位置 window.addEventListener('load', () => {     myCircle.style.position = 'absolute'; // 确保元素可以被定位     myCircle.style.left = '0px';     myCircle.style.top = '120px'; // 示例初始位置 });  // 使用 keydown 事件监听器 window.addEventListener('keydown', (event) => {     if (event.key === 'ArrowLeft') {         // 每次 keydown 事件触发时，将元素向左移动 5 像素         myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';     } else if (event.key === 'ArrowRight') {         myCircle.style.left = parseInt(myCircle.style.left) + 5 + 'px';     }     // 阻止默认滚动行为，例如按下方向键时页面滚动     event.preventDefault(); });

// HTML 结构示例： // <div class="ball" style="width:50px; height:50px; background-color:red; border-radius:50%;"></div>  // JavaScript 代码： let myCircle = document.querySelector('.ball'); const moveSpeed = 5; // 定义移动速度  // 存储按键状态的对象 const keysPressed = {     ArrowLeft: false,     ArrowRight: false,     ArrowUp: false,     ArrowDown: false };  // 页面加载时初始化元素位置 window.addEventListener('load', () => {     myCircle.style.position = 'absolute';     myCircle.style.left = '0px';     myCircle.style.top = '120px';     // 启动动画循环     gameLoop(); });  // 监听按键按下事件 window.addEventListener('keydown', (event) => {     if (keysPressed.hasOwnProperty(event.key)) {         keysPressed[event.key] = true;         // 阻止默认行为，例如方向键滚动页面         event.preventDefault();     } });  // 监听按键释放事件 window.addEventListener('keyup', (event) => {     if (keysPressed.hasOwnProperty(event.key)) {         keysPressed[event.key] = false;     } });  // 动画循环函数 function gameLoop() {     let currentLeft = parseInt(myCircle.style.left);     let currentTop = parseInt(myCircle.style.top);      if (keysPressed.ArrowLeft) {         currentLeft -= moveSpeed;     }     if (keysPressed.ArrowRight) {         currentLeft += moveSpeed;     }     if (keysPressed.ArrowUp) {         currentTop -= moveSpeed;     }     if (keysPressed.ArrowDown) {         currentTop += moveSpeed;     }      // 更新元素位置     myCircle.style.left = currentLeft + 'px';     myCircle.style.top = currentTop + 'px';      // 请求浏览器在下一次重绘时再次调用 gameLoop     requestAnimationFrame(gameLoop); }

大家都在看：