收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
document.onkeydown = function(e){
var e = e || event;
//alert(e.keyCode);
//alert(e.shiftKey);
if(e.shiftKey){
if (e.keyCode == 65) {
alert('我按了一下A鍵')
}
}
console.log('我按下了鍵盤(pán)')
}
document.onkeyup = function(){
console.log('我松開(kāi)了鍵盤(pán)')
}
document.onkeypress = function(){
console.log('按了一次鍵盤(pán)')
}
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#box{width:100px;height:100px;position:absolute;/*background:pink;*/}
#parent{width:400px;height:400px;border:1px solid red;background-image:url(./bg.jpg);}
</style>
</head>
<body>
<div id="parent">
<div id="box" style="left:0px;top:0px;">
<img src="./me.png" alt="">
</div>
</div>
</body>
<script>
var box = document.getElementById('box');
//上鍵 38
//下鍵 40
//左鍵 37
//右鍵 39
document.onkeydown = function(e){
var e = e || event;
//alert(e.keyCode);
switch(e.keyCode){
case 37:
if((parseInt(box.style.left)-10)>0){
//alert('按了左鍵')
box.style.left = parseInt(box.style.left)-10+'px';
}else{
box.style.left = '0px';
}
break;
case 38:
if((parseInt(box.style.top)-10)>0){
//alert('按了上鍵')
box.style.top = parseInt(box.style.top)-10+"px";
}else{
box.style.top="0px";
}
break;
case 39:
//alert('按了右鍵')
if(parseInt(box.style.left)< 300){
box.style.left = parseInt(box.style.left) + 10 + 'px';
}else{
box.style.left= 300+'px';
}
break;
case 40:
//alert('按了下鍵')
if(parseInt(box.style.top) < 300){
box.style.top = parseInt(box.style.top) + 10 +'px';
}else{
box.style.top='300px';
}
break;
}
}
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)