Latihan Menulis: Kotak Disko Javascript

Kali ini kita akan bermain dengan kotak warna-warni yang berubah setiap 100 milidetik menggunakan JavaScript. Jumlah kotak yang diinginkan bisa diatur dan otomatis JavaScript akan menggambar kotak tersebut sesuai jumlah tersebut.

Contoh hasil di bawah ini menggunakan 500 kotak.

Kode lengkapnya langsung aja deh :


<!DOCTYPE html>

<html>

<head>

  <title>Disko</title>

</head>

<body>

  <script type="text/javascript">

  var jumlah_kotak = 500;

  function acak() {

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

  }

  function setWarna(ID) {

    document.getElementById(ID).style.backgroundColor =

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

  }

  function setSemuaWarna() {

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

      setWarna("k" + kID);

  }

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

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

  setInterval("setSemuaWarna()", 100);

  </script>

  <style type="text/css">

  .kotak {

    padding: 10px;

    width: 32px;

    height: 32px;

    text-align: center;

    font-family: Arial;

    font-size: 11x;

    line-height: 32px;

    border: 1px solid #000;

    float: left;

    margin: 5px;

  }

  </style>

</body>

</html>

Mudah bukan ? Silahkan mencoba bila berminat, hati-hati dengan penulisan huruf besar dan kecil karena JavaScript bersifat case sensitive. Termasuk tanda bacanya juga.

Latihan Menulis

Selasa, 02 Desember 2014

Kotak Disko Javascript

Tidak ada komentar:

Posting Komentar