<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body id="bdy">
<style>
#Container{
box-sizing: border-box;
width: 600px;
height: 600px;
border: 3px solid gray;
position: relative;
}
#Container #ContainerInside{
box-sizing: border-box;
width: 48px;
height: 48px;
background-color:yellow;
position: absolute;
}
</style>
Sonuc:
<input type="button" value="0" id="sonuc">
<input type="button" value="0" id="sonuc1">
<div id="Container">
<div id="ContainerInside"></div>
</div>
<script>
var pos1=0, pos2=0;
document.onkeydown=function keyKontrol(e){
var keyKod=e.which;
var box= document.getElementById("ContainerInside");
var tuval= document.getElementById("Container");
var sonuc= document.getElementById("sonuc");
var sonuc1= document.getElementById("sonuc1");
if(keyKod == 37){
if(pos1>0)
sonuc.value=Number(sonuc.value)-50;
pos1= sonuc.value;
box.style.left= pos1 + "px";
console.log("37: "+pos1);
}
if(keyKod == 38){
if(pos2>0)
sonuc1.value=Number(sonuc1.value)-50;
pos2= sonuc1.value;
box.style.top= pos2 + "px";
console.log("38: "+pos2);
}
if(keyKod == 39){
if(pos1<550)
sonuc.value=Number(sonuc.value)+50;
pos1= sonuc.value;
box.style.left= pos1 + "px";
console.log("39: "+pos1);
}
if(keyKod == 40){
if(pos2<550)
sonuc1.value=Number(sonuc1.value)+50;
pos2= sonuc1.value;
box.style.top= pos2 + "px";
console.log("40: "+pos2);
}
console.log("sonuc1: "+sonuc.value);
console.log("sonuc2: "+sonuc1.value);
}
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder