İç içe Liste Örneği

Eklenme Tarihi: 04-10-2018
Ekleyen: Cemil Baki

Bu animasyonlu listeyi hazırlayan Anıl EROĞLU arkadaşımıza teşekkür ediyoruz.

Sampiyonlar Ligi

2018-19 kadroları

  1. GalataSaray
    • Defans Oyuncuları
      1. Muslera
      2. Dong
    • Orta Saha
      1. Selcuk
      2. Rodgiues
    • Forvet Oyuncuları
      1. Eren
      2. Sinan

Mac Sonucları

  • Porto-GS 1-0
  • GS-Porto ?-?

 



 


<div id="degis" style="clear: both; margin:auto;background-color:white;color:black;width:190;padding:50px;">

<h1 style="text-align:center">Sampiyonlar Ligi</h1>


<p style="text-align:center">2018-19 kadroları</p>


<ol type="A">

<li>GalataSaray

<ul type="square">

<li>Defans Oyuncuları

<ol>

<li>Muslera</li>

<li>Dong</li>

</ol>

</li>

<li>Orta Saha

<ol start="3">

<li>Selcuk</li>

<li>Rodgiues</li>

</ol>

</li>

<li>Forvet Oyuncuları

<ol start="5">

<li>Eren</li>

<li>Sinan</li>

</ol>

</li>

</ul>

</li>

</ol>


<h2 style="text-align:center">Mac Sonucları</h2>


<ul type="square">

<li>Porto-GS 1-0</li>

<li>GS-Porto ?-?</li>

</ul>


<p>&nbsp;</p>


<p>&nbsp;</p>


<hr />

<p>&nbsp;</p>

</div>


<hr /><hr />


<script>

//Gerekli Bilgiler

var max_radius=200; //Max Kenar Yumusaklıgı

var min_radius=1; //Min Kenar Yumusaklıgı

var div_id="degis"; //Islem Uygulanacak Div ID

var renk_delay=50; //Renkler Kac Milisaniyede Bir Degisecek Ayari (50 Milisaniye)

var radius_delay=10; //Radius Kenar Yumusaklıgı Kac Saniyede Bir Degisecek Ayari (10 Milisaniye)



function deg(d1,d2){ //Degerleri Sıfırlamak icin yeni degerler ile alt fonksiyonu calistirdik

var d = d1;

var c = d2;

dongu2(); //ust fonksiyon calıstıgında degisken degerlerini guncelleyip alt fonksiyonu calıstırdık...

function dongu2 () { //alt fonksiyon

   setTimeout(function () {

      d--; //d degerini 1 eksilttik

      c++; //c degerini 1 arttirdik

      if (d <= max_radius) { //if else kontrol

       console.log("Islem:"+d);

document.getElementById(div_id).style["border-radius"] = d+"px "+c+"px "+d+"px "+c+"px";

     dongu2(); //Her arttıgında tekrar basa döndürüp 1 arttirdik

      }

      if(d == min_radius){ //if else kontrol

       deg1(min_radius,max_radius); //Islem sonlandıgında aynı ıslemın tersini yaptırmak icin alt fonksiyonu calıstırdık

       console.log("[Fonksiyon: DONGU2] Islem Bitti Ters Islem Icin Diger Fonksiyon Calıstırılıyor...");

      }

   }, radius_delay) //Milisaniye Biciminde delaye ekledik

}

}


function deg1(d1,d2){ //Degerleri Sıfırlamak icin yeni degerler ile alt fonksiyonu calistirdik

var a = d1;

var b = d2;

dongu(); //ust fonksiyon calıstıgında degisken degerlerini guncelleyip alt fonksiyonu calıstırdık...

function dongu () { //alt fonksiyon

   setTimeout(function () {

      a++;

      b--;

      if (a <= max_radius) { //if else kontrol

       console.log("Islem:"+a);

document.getElementById(div_id).style["border-radius"] = a+"px "+b+"px "+a+"px "+b+"px";

     dongu(); 

      }

      if(a == max_radius){ //if else kontrol

       deg(max_radius,min_radius); //Islem sonlandıgında aynı ıslemın tersini yaptırmak icin üst fonksiyonu calıstırdık

        console.log("[Fonksiyon: DONGU] Islem Bitti Ters Islem Icin Diger Fonksiyon Calıstırılıyor...");

      }

   }, radius_delay) //Milisaniye Biciminde delaye ekledik

}

}


function disko_tekrar(d1){

var a = d1;

disko();

function disko() { //alt fonksiyon

   setTimeout(function () {

    var renkler = ["red", "blue", "green","orange","yellow","cyan","grey"];

      a++;

      if (a <= 6) { //if else kontrol

       console.log("Renk Kodu:"+a);

document.getElementById(div_id).style["border"] = "10px solid "+renkler[a];

     disko(); 

      }

      if(a == 6){ //if else kontrol

       disko_tekrar(0); //Islem sonlandıgında aynı ıslemın tersini yaptırmak icin üst fonksiyonu calıstırdık

        console.log("[Fonksiyon: A] Islem Bitti Ters Islem Icin Diger Fonksiyon Calıstırılıyor...");

      }

   }, renk_delay) //Milisaniye Biciminde delaye ekledik

}

}


deg1(min_radius,max_radius); //Baslangic Olarak ilk fonksiyonumuzu startladik daha sonrasında kendi icinde sonsuz döngüye girecek.

disko_tekrar(0);



</script>