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 :
Mudah bukan ? Silahkan mencoba bila berminat, hati-hati dengan penulisan huruf besar dan kecil karena JavaScript bersifat case sensitive. Termasuk tanda bacanya juga.
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.
Komentar
Posting Komentar