Sidebar İçin Özet Metin Kutusu(Elipsisli-3 noktalı) HTML-CSS
Klavyeden girilen sayıya kadar olan Fibonacci serisini yazdiran Javascript Programı
Bugün Fibonacci serisi üreten bir Javascript programı yapacağız. İtalyan matematikçi Leonardo Fibonacci'nin 12. yüzyılda keşfettiği gizemli Fibonacci serisi matematik ve yazılımla ilgilenlerin malumudur. Bir başlangıç değerinden itibaren her bir sayı bir önceki ile toplanarak bir sonraki sayı elde edilir ve bu ilginç seri bu şekilde sonsuza kadar gider.
Burada önemli bir noktayı belirtmek istiyorum. Fibonacci sayısı diye bir şey yoktur. Fibonacci serisi vardır. Burada esas olan yukarıda belirttiğimiz kurala uygun elemanların artarak sıralanmasıdır. Herhangi bir sayıdan başlayabilir. Asal sayılar ile karıştırılmamalıdır. Bu programda biz seriyi 1 den başlattık. Ama herhangi bir sayıdan başlayan versiyonunu yazmak da size kalmış.
Lütfen bir sayı girin ve enter tuşuna basın
Kodlar
<input type="text" id="sayiYaz" />
<div id="fibonacci">0</div>
<script>
var a = 1;
var b = 1;
var c = 0;
var i = 0;
var fibonacciDizisi = [];
var eleman = document.getElementById("sayiYaz");
eleman.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("fibonacci").innerHTML = "";
while (i < parseInt(eleman.value)) {
if (i <= 1) {
fibonacciDizisi[i] = 1;
i++;
} else {
c = a + b;
if (c > eleman.value) {
break;
}
fibonacciDizisi[i] = c;
i++;
a = b;
b = c;
}
}
for (j = 0; j < fibonacciDizisi.length - 1; j++) {
document.getElementById("fibonacci").innerHTML += fibonacciDizisi[j] + ",";
}
}
});
</script>
SaygılarımlaTurgut Arslan
1'den N'ye kadar olan sayıların toplamını yapan JavaScript programı
Programın kodları aşağıdaki gibidir
<input type="text" id="sayiKutu" />
<div id="sonuc">0</div>
<script>
var eleman = document.getElementById("sayiKutu");
eleman.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
var t = 0;
var x = 1;
while (x <= parseInt(eleman.value)) {
t = t + x;
x = x + 1;
}
document.getElementById("sonuc").innerHTML = t;
}
});
</script>
Saygılarımla...
Turgut ARSLAN
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>
<script>
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 class="productBox">
<div class="productImages">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Asv63bj3E2If7jgm-_GoroyOFZpResKSWFf65VtkyJ9846nhBW0Zz7pfAkB2NQZtCszwqSbE-IKJdL5eNzGQsUxZ0lJrsQAZtHxSxRWvYpz8wiJzxGSngYEVlmgSRBayX09wh8rZR1g/s0/a1.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57pTPjVZ8VfbO6fK_mTP03MfS_ND0WIbDW6q0vcBUWBHTJjId-6egNww95QMdzHMb0wB131Dmj-GLMzvusAgX7ZfKgRVP75BBagHAB9a-hvLYjWeD5R_UM-oC1E2pt-0K0LkOtJR3ZX4/s0/a2.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z9xNRo0ZtsvNISWZwN_G4kELyF9FhjFDJVmMaKYbn7q-lJ_visRrWPyzyo2kbX3Su8hARurzZkO4BzLq_nsgcfPsgwMKuQeDYx90aEfz-nDXrbtgOVcXKjlSLmxeuK2chLJ_ZcNTzuk/s0/a3.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLx2sSCf2JKMPDCtMJGONO3wcq6YdHZ_5uf-aa9KE7xA6W2SmoHDDTkBChqY1PEjIxC7lpN66G_DtVMi2eRX1jLU_DqtyhhsFqwAyr1pfeeBVT5emo9NbfxVbc09NxcAlb4aPdB5-2zU/s0/a4.jpg" class="productImage" />
</div>
<div class="imageThumbs">
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
</div>
</div>
<div class="productBox">
<div class="productImages">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR63dmMfuGmzqa32XhiiufZcB2qqAYtf2q_s9pRl8tS7RjF2m5gPh12Wb6kyT-86VclBge1JXIL6ity5UizX6M9x0fmplSLWfE9sugLhJZq5mnLeakEfGtPzxTHPefF9i-avlr1Ky1ZZI/s0/b1.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGcaqGBrBYT4u-LRoBVwo4TtnMKcwlF3apcpNu9fjV3V2X8JYvz44S6He7_3CAgvMvMBpFZq2xg0fYDCTA7GL2ybC4MbLo66fzOemTGw_CagwBRZfV94IZ9Zpn1mD9z9UXnLI3CCPzgI/s0/b2.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8x0-DWQex4dM63FrGec1ZcjVIitZO5Q2Y3j9lhpqs4FjWTwPL2OrQUhn8kX_kpec9POvZKbY9UWxpSpZ8TyD6HkeFUIq7IjpOd2krE5jW1c9x_pwAYFN9NBjClYj8epCfldy33lDYQTw/s0/b3.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBPUiKuvW9TM2noVoUt0onhU8zYCukU-vo2Hrhm-QBajI2US27BTQc72uZDxTefbunorwKCd0ys8IwPmnaouryysBuub4tqEOmBMhhXYM4JoHle1myXvJNNXNuophHb3NUBZOxJWVK08/s0/b4.jpg" class="productImage" />
</div>
<div class="imageThumbs">
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
</div>
</div>
<div style="display:block;width:100%;height:10px;clear:both;"> </div>
Saygılarımla...
Turgut ARSLAN
Babamı kaybedeli ne kadar zaman geçti?
Babamı 27 Ocak 2021 günü kaybetmiştim.
Salih Bey'in Ruhu için El Fatiha!
JS ve CSS ile HTML Elemanlarının Sıralamasını Nasıl Değiştiririz?
HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır.
Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır.
<style>
.kapsayici {
display: flex;
display: -webkit-flex;
flex-direction: column;
max-width: 92px;
height: auto;
margin: 0px auto;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.eleman,
.karistirButon {
padding: 3%;
border: solid 1px #f00;
margin: 2px;
max-width: 92px;
text-align: center;
}
.karistirButon {
background-color: red;
color: #fff;
margin: 0px auto;
margin-top: 5px;
cursor: pointer;
display: block;
padding: 1%;
max-width: 92px;
}
</style>
<script>
function siraDegistir() {
var sira = 0;
var siraliste = [];
var i = 0;
var elemanlar = document.querySelectorAll(".eleman");
for (i = 0; i < elemanlar.length; i++) {
sira = Math.floor(Math.random() * (elemanlar.length)) + 1;
if (!siraliste.includes(sira)) {
siraliste.push(sira);
elemanlar[i].style.order = sira;
} else {
i--;
}
}
}
</script>
<div class="kapsayici">
<div class="eleman">1</div>
<div class="eleman">2</div>
<div class="eleman">3</div>
<div class="eleman">4</div>
</div>
<div class="karistirButon" onclick="siraDegistir();">Sırayı Karıştır</div>
Bu kodların çalışır hali
Saygılarımla...
Turgut ARSLAN
Firefox ile Bir Sitenin TLS Versiyonunu Nasıl Öğrenirsiniz?
TLS (Transport Layer Security), internet üzerinden yapılan iletişimi güvence altına alan bir protokoldür. Bir web sitesinin hangi TLS versiy...
-
Google Ads reklamlarının TBM maliyetleri enflasyon ve rekabetin etkisiyle giderek artmakta. Artık eskisi gibi ucuz CPC'lerle reklam yapm...
-
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 ...
-
Google Maksimum Performans Kampanyalarının En İyi Kurulum Ayarları Google Maksimum Performans Kampanyaları (MKP), Google Ads'in en yen...