Latihan Menulis: Rainbow Cave dengan JavaScript

Seperti halnya iseng-iseng saya sebelumnya, kali ini saya akan kembali membuat kotak yang berganti-ganti warna tetapi di dalamnya diberi kotak yang lebih kecil dan seterusnya sesuai jumlah kotak yang diinginkan. Saya bingung namanya, tetapi istri saya mengusulkan nama Gua Pelangi yang dalam bahasa Inggrisnya Rainbow Cave.

Bentuk jadinya seperti ini :

Sedangkan kode lengkapnya adalah :


<!DOCTYPE html>

<html>

<head>

  <title>Rainbow Cave</title>

</head>

<body>

  <script type="text/javascript">

  var jumlah_kotak = 50;

  function acak() {

    return parseInt(Math.random() * 255, 10);

  }

  function setWarna(ID) {

    document.getElementById(ID).style.backgroundColor =

      "rgb(" + acak() + "," + acak() + "," + acak() + ")";

  }

  function setSemuaWarna() {

    for (var i = 1; i <= jumlah_kotak; i++)

      setWarna("k" + i);

  }

  for (var k = 1; k <= jumlah_kotak; k++)

    document.write("<div class=\"kotak\" id=\"k" + k + "\">");

  for (var k = 1; k <= jumlah_kotak; k++)

    document.write("</div>");

  setInterval("setSemuaWarna()", 100);

  </script>

  <style type="text/css">

  .kotak {

    padding: 5px;

    border: 1px solid #000;

  }

  </style>

</body>

</html>

Demikianlah Rainbow Cave ala JavaScript yang mungkin tidak terlalu berguna. Tapi yahh.. namanya juga iseng. Hahahaha. Sampai jumpa di artikel berikutnya.

Latihan Menulis

Selasa, 02 Desember 2014

Rainbow Cave dengan JavaScript

Tidak ada komentar:

Posting Komentar