Kayıtlar

Orta Seviye Javascript etiketine sahip yayınlar gösteriliyor

JavaScript Başa Dön | Scroll To Up Butonu Kodu

Resim
Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu. <script>   var btnP =0;   window.addEventListener("load",function(){     btnP =window.scrollY;   });   window.addEventListener("scroll",function(){       scrollStat();   });   function scrollStat(){     btnP =window.scrollY;     if(btnP <=600 ){       document.getElementById("toTopBtn").className ="scrollToTopBtn";     }     else{       document.getElementById("toTopBtn").className ="scrollToTopBtn scrollToTopBtnShow";     }   }   function scrollToTop(){     window.scrollTo(0,0);     scrollStat();   }   </script>   <style>     *{       scroll-behavior: smooth;     }     .scrollToTopBtn{       position:fixed;       bottom:3%;       right:5%;       background-color:#e7e7e7;       color:#555;       font-size: 15px;       font-family: 'Helvetica';       font-weight: 400;       cursor:pointer;       transition: all 0.

JavaScript ile Mesai Sayacı

Resim
Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım. Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir. <p>Lütfen mesai bitiş saatini girin</p> <input type="tel" placeholder="HH:MM:SS" id="timeInputId" /> <input type="button" id="tmrBtn" value="Mesai Sayacını Başlat"/> <p id="demo"></p> <p id="demo2"></p> <script> var x; var finishTime= "00:00:00"; var brTitle= document.title; window.addEventListener("load",function(){ var timeBtn = document.getElementById("tmrBtn"); var timeInput = docume

Javascript SEO Metin İşaretleme Editörü

 SEO metni oluştururken işaretlemede kolaylık sağlamak amacıyla basit bir işaretleme editörü yaptım SEO Editör SEO Metin İşaretleme Editörü İstediğiniz işareti seçin P Em Strong H1 H2 H3 H4 H5 H6 İşaretle ve Ekle İşaretlemek istediğiniz metni girin Metnin işaretlemek istediğiniz yerlerini kutudan seçin ve yukarıdaki menüden etiket seçimini yapıp, İşaretle ve ekle butonuna basın. İşlem sonucu aşağıdaki gibi görünecektir.

Sliderli Product Box Örneği

Resim
  Sliderli Product Box Kodları :  <style> .productBox{ display:block; position:relative; width:25%; height:auto; float:left; box-sizing:border-box; border:solid 1px #dedede; border-radius:1rem; padding:.3rem; margin:.3%; background:#fff; } .productImages{ position:relative; width:100%; height:auto; display:block; padding-bottom:100%; box-sizing:border-box; } .productImage{ margin:auto; max-width:85%; height:auto; display:none; position:absolute; z-index:1; top:0; left:0; right:0; bottom:0;box-sizing:border-box;} .productImage:nth-child(1){display:block;} .imageThumbs{display:flex;width:100%;justify-content: center;margin:0px auto;} .imageThumbsItem{ display:block; border:solid 1px #dedede; width:1rem; height:1rem; border-radius:50%; margin:1%; box-sizing:border-box; cursor:pointer; } </style> <scr

Javascript Büyüteç Uygulaması

Resim
Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım. Javascript Büyüteç Kodları: HTML Kodu; <div id="resimKabi">   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />   <div id="buyutec"></div> </div> CSS Kodu; #resimKabi {   width: 100%;   height: auto;   display: block;   position: relative;   overflow: hidden; } #resimKabi img {   display: block;   width: 100%;   height: auto; } #buyutec {   width: 100px;   height: 100px;   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg);   background-repeat: no-repeat;   bor