index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
style.css
* {
margin: 0;
}
#test {
width: 50px;
height: 50px;
background: orange;
position: absolute;
}
1.js
// onkeydown - событие в момент нажатия клавиши
var block = document.getElementById('test');
var left = 0;
var t = 0;
document.onkeydown = function(event) {
console.log(event);
if(event.key == 'ArrowRight') {
block.style.left = left + 'px';
left++;
}
if(event.key == 'ArrowDown') {
block.style.top = t + 'px';
t++;
}
}
// onkeyup- событие в момент отпускания клавиши
document.onkeyup = function(event) {
console.log('Отпустили клавишу');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
style.css
* {
margin: 0;
}
#test {
width: 50px;
height: 50px;
background: orange;
position: absolute;
}
1.js
// onkeydown - событие в момент нажатия клавиши
var block = document.getElementById('test');
var left = 0;
var t = 0;
document.onkeydown = function(event) {
console.log(event);
if(event.key == 'ArrowRight') {
block.style.left = left + 'px';
left++;
}
if(event.key == 'ArrowDown') {
block.style.top = t + 'px';
t++;
}
}
// onkeyup- событие в момент отпускания клавиши
document.onkeyup = function(event) {
console.log('Отпустили клавишу');
}
Комментариев нет:
Отправить комментарий