- Katılım
- 9 Ara 2020
- Konular
- 71
- Mesajlar
- 255
- Çözümler
- 1
- Tepki puanı
- 218
- Puanları
- 2,110
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
#div{
background:blue;
width: 120px;
height: 30px;
}
.hr{
border: none;
border-left: 1px solid black;
height: 10vh;
width: 1px;
}
hr{
position: relative;
width: 100px;
}
div:hover{
cursor:crosshair;
}
#ct{
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<center>
<div id="div"></div>
</center>
<div id="ct" style="font:bold 100px tahoma;">
</div>
<script type="text/javascript">
window.onmousedown=function(){
window.onmousemove=function(){
var x = event.clientX;
var y = event.clientY;
document.querySelector("#div").innerHTML="X :"+x+"Y :"+y;
}
}
window.onmouseup=function(){
window.onmousemove="";
var x = event.clientX;
var y = event.clientY;
var x2=x-12;
var y2=y-48;
document.querySelector("#div").innerHTML="X :"+x+"Y :"+y;
document.querySelector("#ct").style="margin:"+y2+"px 0 0 "+x2+"px;"
document.querySelector("#ct").innerHTML="+";
}
</script>
</body>
</html>
Herkese merhaba bugün sizlere imlecinizin konumunu gösteren kodu paylaşacağım kod yukarı da hadi kodumuzu anlayalım.
İlk önce body etiketlerinin arasına div yerleştirdim ve ona bir id verdim.
Kodun css kısmında yani style etiketlerinin arasında div'ime height(uzunluk) ve width(genişlik) ve background(arkaplan rengi) verdim dilerseniz siz ilgili yerleri değiştirerek kendinize göre tasarlayabilirsiniz.
Evet kodun Javascript kısmında window derken pencere yani ekranın tamamı , onmousedown sol click bırakılırsa ve onmouseup sol click basılı tutulursa anlamına geliyor.Gördüğünüz gibi bunlara birer function(fonksiyon)atadım ve dikkat ederseniz function(event) yazdım event nedir event etkinlik manasına geliyor.Şimdi alt tarafta event.clientX ifadesini kullandım bu ifade function(fonksiyon)'un çalıştırıldığı yerin X doğrusundaki yerini veriyor aynı şekilde de event.clientY Y doğrusundaki konumunu veriyor.Bu değerleri kullandığımız div'in innerHTML'ne atarak kodumu tamamlıyorum.
Başka kodlarda görüşmek üzere...
Son düzenleme: