【web】键盘事件 按键移动
键盘事件
- 键盘事件
- keydown
- keyup
- keypress
- 例子：左上右下37.38.39.40(按键移动)
window.xx
keycode 键码
keydown
当用户按下键盘上的任意键时角触发，按住不动将重复触发
keyup
当用户释放键盘上的键时触发
keypress
只能识别字母数字
当用户按下键盘上的字符键时角触发，按住不动将重复触发
例子：左上右下37.38.39.40(按键移动)
(丝滑版) 状态+定时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>键盘控制div移动</title><style>*{margin: 0;padding: 0;list-style: none;}div{width: 100px;height: 100px;background-color: skyblue;position: absolute;}</style>
</head>
<body><div></div>
</body>
<script>var d=document.querySelector('div')var timer=null;var isLeft=false;var isRight=false;var isTop=false;var isBottom=false;//状态+计时器window.onkeydown=function(e){//左if(e.keyCode===37){isLeft=true;}else if(e.keyCode===39){//右isRight=true; }else if(e.keyCode===38){//上isTop=true; }else if(e.keyCode===40){//下isBottom=true; }}window.onkeyup=function(e){//左if(e.keyCode===37){isLeft=false;}else if(e.keyCode===39){//右isRight=false; }else if(e.keyCode===38){//上isTop=false; }else if(e.keyCode===40){//下isBottom=false; }}timer=setInterval(function(){var l=d.offsetLeft;var t=d.offsetTop;if(isLeft){l-=7;}if(isRight){l+=7;}if(isTop){t-=7;}if(isBottom){t+=7;}d.style.left=l+'px';d.style.top=t+'px';},30)
</script>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！