javascript按键盘上/右/下/左箭头加速运动
JavaScript 键盘 箭头
2023-09-14 08:58:23 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript加速运动</title> </head> <body> <button style="width:80px; height:40px; line-height:40px; text-align:center; background:linear-gradient( to left ,#999,#d96972,#cc1233,#d96972); position:fixed; top:200px; left:200px;border:0">加速</button> <script type="text/javascript"> var btn = document.getElementsByTagName('button')[0]; //创建一个div var div = document.createElement('div'); document.body.appendChild(div); div.style.width='100px'; div.style.height='100px'; div.style.backgroundColor='red'; div.style.position='absolute'; div.style.left='0'; div.style.top='0'; var speed = 5; btn.onclick=function(){ speed++; } console.log('速度'+speed); //onkeydown 事件会在用户按下一个键盘按键时发生。 document.onkeydown = function(e){ // console.log(e)//打印e就知道以下数字的由来 switch (e.which) { //向上 case 38: div.style.top = parseInt(div.style.top) - speed + 'px'; break;//来阻止代码自动地向下一个 case 运行 //向下 case 40: div.style.top = parseInt(div.style.top) + speed + 'px'; break; //向左 case 37: div.style.left = parseInt(div.style.left) - speed + 'px'; break; //向右 case 39: div.style.left = parseInt(div.style.left) + speed + 'px'; break; } } </script> </body> </html>
相关文章
- javascript 基础_JavaScript高级编程
- 【说站】JavaScript垃圾回收的优化方法
- 【说站】javascript相等操作符的使用
- JavaScript事件处理程序
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
- 兄弟连JavaScript视频教程
- javascript的事件描述
- javascript编程起步(第二课)
- Javascript常用运算符(Operators)-javascript基础教程
- javascript屏蔽鼠标键盘的几段代码
- javascript学习之旅(2)
- JavaScript验证浏览器是否支持javascript的方法小结
- 键盘keycode的值javascript时触发事件时很有用的要素
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- Javascript检测键盘按键信息及键码值对应介绍
- javascript的内存管理详解
- 浅析javascript中function的length属性
- JavaScript代码应该放在HTML代码哪个位置比较好?
- JavaScript中伪协议javascript:使用探讨
- javascript获取函数形参个数
- Javascript基础教程之JavaScript语法
- javascript中键盘事件用法实例分析