HTML&CSS&JAVASCRIPT İmleç'in konumunu gösteren kod ;

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



1611521553653.png
 
Son düzenleme:

avnnn

Genel Moderatör
Katılım
16 Şub 2020
Konular
271
Mesajlar
875
Çözümler
2
Tepki puanı
1,138
Puanları
7,910
Yararlı bir kod ve konu olmuş, ellerine emeğine sağlık.
 
Katılım
13 Kas 2019
Konular
41
Mesajlar
398
Tepki puanı
291
Puanları
3,310
Koordinatın arka planı mavi ve sayı da siyah uyumlu olmamış onu değiştirirsen daha güzel olabilir, güzel bir kodlama ellerine sağlık.
 
Katılım
9 Ara 2020
Konular
71
Mesajlar
255
Çözümler
1
Tepki puanı
218
Puanları
2,110
Koordinatın arka planı mavi ve sayı da siyah uyumlu olmamış onu değiştirirsen daha güzel olabilir, güzel bir kodlama ellerine sağlık.
Yazıda da dediğim gibi ilgili yerleri değiştirerek kendine göre tasarlayabilirsin.Hemen açıklayayım
kodun yukarı kısmındaki <style></style> arasındaki #div{} arasındaki background:blue yazan yerde blue'yu istediğin bir renk yapabilirsin ayrıca alt tarafa color: ekleyerek de yazı rengini ayarlayabilirsin :)
 
  • Beğen
Tepkiler: BabaYaga
Katılım
13 Kas 2019
Konular
41
Mesajlar
398
Tepki puanı
291
Puanları
3,310
Yazıda da dediğim gibi ilgili yerleri değiştirerek kendine göre tasarlayabilirsin.Hemen açıklayayım
kodun yukarı kısmındaki <style></style> arasındaki #div{} arasındaki background:blue yazan yerde blue'yu istediğin bir renk yapabilirsin ayrıca alt tarafa color: ekleyerek de yazı rengini ayarlayabilirsin :)
Anladım teşekkür ederim anlattığın için. Ha bu arada bu kod anlık imleç yerini gösteriyor ya hani, bunun süreklisini de yapabilir misin?
 
Katılım
9 Ara 2020
Konular
71
Mesajlar
255
Çözümler
1
Tepki puanı
218
Puanları
2,110
Anladım teşekkür ederim anlattığın için. Ha bu arada bu kod anlık imleç yerini gösteriyor ya hani, bunun süreklisini de yapabilir misin?
Aslında 2 tane kod vardı elimde biri sürekli gösteren diğeri de tıklayınca gösteren @avn bir fikir verdi ve basılı tutunca sürekli gösteren tıklayınca da gösteren olsun dedi ben de öyle yapıp paylaştım :D
 
  • Beğen
Tepkiler: BabaYaga
Katılım
18 Kas 2020
Konular
35
Mesajlar
536
Çözümler
1
Tepki puanı
262
Puanları
3,460
Güzel bir kod eline sağlık da tek sıkıntı ben hiçbir şey anlamıyorum :ROFLMAO: