Файл: modules/homework2.html
Строк: 114
<?php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lesson 8</title>
<style>
.man {
width: 150px;
height: 200px;
background-image: url(man2.jpg);
background-size: 150px 200px;
top: 30%;
left: 50%;
position: absolute;
/* -webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);*/
transform: rotate(0deg);
}
</style>
</head>
<body>
<button>up</button>
<button>down</button>
<button>left</button>
<button>right</button>
<button>clean</button>
<div class="man">
</div>
<script>
function getE(a) {
return document.getElementById(a);
}
function getT(a, b) {
return document.getElementsByTagName(a)[b];
}
var btns = document.getElementsByTagName("button");
//alert(btns.length);
for (var i = 0; i < btns.length; i++) { // Якщо потрібно на кілька елементів поставити подію!
btns[i].onclick = function () {
if (this.innerHTML == "up") { // Провірка на іннер елемента на якому спрацьовує подія
var goTop = man.offsetTop;
man.style.top = goTop - 25 + 'px';
man.style.transform = 'rotate(0deg)';
}
if (this.innerHTML == "down") {
var goDown = man.offsetTop;
man.style.top = goDown + 25 + 'px';
man.style.transform = 'rotate(180deg)';
}
if (this.innerHTML == "left") {
var goLeft = man.offsetLeft;
man.style.left = goLeft - 25 + 'px';
man.style.transform = 'rotate(-90deg)';
}
if (this.innerHTML == "right") {
var goRight = man.offsetLeft;
man.style.left = goRight + 25 + 'px';
man.style.transform = 'rotate(90deg)';
}
if (this.innerHTML == "clean") {
var goLeft = man.offsetLeft;
man.style.left = goLeft ='50%';
var goTop = man.offsetTop;
man.style.top = goTop ='30%';
man.style.transform = 'rotate(0deg)';
}
}
}
/////////////////////////////////////////
var man = document.querySelector('.man');
window.addEventListener('keydown',function(e){
console.log('keydown object property - ',e.keyCode);
if(e.keyCode == 38){
var goTop = man.offsetTop;
man.style.top = goTop - 25 + 'px';
man.style.transform = 'rotate(0deg)';
}
if(e.keyCode == 40){
var goDown = man.offsetTop;
man.style.top = goDown + 25 + 'px';
man.style.transform = 'rotate(180deg)';
}
if(e.keyCode == 37){
var goLeft = man.offsetLeft;
man.style.left = goLeft - 25 + 'px';
man.style.transform = 'rotate(-90deg)';
}
if(e.keyCode == 39){
var goRight = man.offsetLeft;
man.style.left = goRight + 25 + 'px';
man.style.transform = 'rotate(90deg)';
}
})
///////////////////////////////////////////////////////////////
</script>
</body>
</html>
?>