Orta Seviye Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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

Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu.

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.5s ease 0s;

width:auto;

height: auto;

display: none;

padding:10px 15px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 2px;

z-index: 99999;

line-height: 30px;

border:solid 1px #e7e7e7;

-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

-moz-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

}

.scrollToTopBtnShow{

display: block;

}

.scrollToTopBtn:hover{

background-color:#079992;

border:solid 1px #079992;

color:#fff;

}

@media only screen and (max-width: 768px) {

.scrollToTopBtn{

font-size: 15px;

}

.scrollToTopBtn:hover{

background-color:#e7e7e7;

border:solid 1px #e7e7e7;

color:#555;

}

</style>

⇡ Başa Dön

JavaScript ile Mesai Sayacı

Javascript Geri Sayım Sayacı Countdown Timer

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 = document.getElementById("timeInputId");

timeInput.onkeydown=function(e){
      
    if(!isNaN(e.key)){
     clearInterval(x);
          if(this.value.length == 2)
          {
              this.value=this.value+":";
          }
          if(this.value.length == 5)
          {
              this.value=this.value+":";
          }
          if(this.value.length >= 8)
          {
              this.value=this.value.substring(0,8);
          }
      }
      else{
      	this.value="";
        
      }
    };
    timeBtn.onclick=function(){
    if(timeInput.value.length >= 8)
        {
        timeInput.value=timeInput.value.substring(0,8);
        	finishTime=timeInput.value;
            startTmr();
        }
    	
    };

});

function startTmr(){
finishTime =finishTime.split(":");
var ft =new Date();
 finishTime=ft.setHours(finishTime[0],finishTime[1],finishTime[2]);

var countDownDate = finishTime;

x = setInterval(function() {

var now = new Date().getTime();
    
   var distance = countDownDate - now;
    
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if(hours < 10) hours="0"+hours;
     if(minutes < 10) minutes="0"+minutes;
     if(seconds < 10) seconds="0"+seconds;

document.getElementById("demo").innerHTML ="Mesai Bitimi İçin Ayarlanan Tarih : "+ft+"<br/> Mesai Bitimine Kalan Süre:<br/> <h2 style='color:red;text-align:center;'>"+   hours + " : "
  + minutes + " : " + seconds+" </h2>";
  if(!document.hasFocus()){
   document.title ="Kalan Süre : "+hours +":"+minutes+":"+seconds;
  }
  else{
  document.title=brTitle;
  }

if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Mesai Bitti";
	document.title="Mesai Bitti";
  }
}, 1000);

}

</script>

Kodları yazarken https://www.w3schools.com/howto/howto_js_countdown.asp linkindeki sayfadan yararlandım

Kodun çalışan örneğini buraya ekliyorum. Dilerseniz günün bir saatini girip kalan sürenin geriye doğru sayılmasını deneyimleyebilirsiniz.

Lütfen mesai bitiş saatini girin

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

İş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

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>

window.addEventListener("load",function(){

var parent;

var imgOrd;

var upParent;

var allItems=document.getElementsByClassName("imageThumbsItem");

for(i=0;i<allItems.length;i++){

allItems[i].addEventListener("mouseover",function(){

parent = this.parentElement;

imgOrd=Array.prototype.indexOf.call(parent.children, this);

upParent=parent.parentElement;

var underImgs=upParent.getElementsByTagName('img');

for (j=0;j<underImgs.length;j++){

underImgs[j].style.display="none";

}

underImgs[imgOrd].style.display="block";

});

}

});

</script>

</div>

</div>

</div>

</div>

Saygılarımla...
Turgut ARSLAN

Javascript Büyüteç Uygulaması

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;
border-radius: 50%;
border: solid 2px #fff;
position: absolute;
}

Javascript Kodu

window.onload = function () {

boyutla();

takipEt();

var eni, boyu, kutuEn, kutuBoy, hesEn, hesBoy;

var buyutec = document.getElementById('buyutec');

var rsmKap = document.getElementById('resimKabi');

window.addEventListener("resize", boyutla);

buyutec.style.backgroundSize = '3000% 3000%';

function boyutla() {

var kutum = document.getElementById('resimKabi');

var urlAdr = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg';

var resm = new Image();

resm.src = urlAdr;

eni = resm.width;

boyu = resm.height;

kutuEn = kutum.offsetWidth;

kutuBoy = kutum.offsetHeight;

hesEn = (eni / kutuEn) * 2.2;

hesBoy = (boyu / kutuBoy) * 3.5;

}

function takipEt() {

var x = null;

var y = null;

document.getElementById('resimKabi').addEventListener('mousemove', onMouseUpdate, false);

document.getElementById('resimKabi').addEventListener('mouseenter', onMouseUpdate, false);

function onMouseUpdate(e) {

var konumu = rsmKap.getBoundingClientRect();

x = e.clientX - konumu.left;

y = e.clientY - konumu.top;

buyutec.style.left = (x - 55) + 'px';

buyutec.style.top = (y - 55) + 'px';

buyutec.style.backgroundPosition = (-x * hesEn) + 'px ' + (-y * hesBoy) + 'px';

}

Bu kodların sonucu;

Kodlar Üzerinde Oynama Yapmak İsterseniz Buraya Bakabilirsiniz

See the Pen Javascript Büyüteç Uygulaması (JS Magnifier) by Turgut Arslan (@draguth) on CodePen.

Saygılarımla...
Turgut Arslan

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

JavaScript ile Mesai Sayacı

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 Metin İşaretleme Editörü

İstediğiniz işareti seçin

İş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

Javascript Büyüteç Uygulaması

Firefox ile Bir Sitenin TLS Versiyonunu Nasıl Öğrenirsiniz?