Mühendislik Notları: Javascript Yön Tuşları Kullanma

19 Aralık 2018 Çarşamba

Javascript Yön Tuşları Kullanma

<!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>

Mühendislik Notları

Menü

Bu Blogda Ara

19 Aralık 2018 Çarşamba

Javascript Yön Tuşları Kullanma