Sunday, November 18, 2012

JavaScript Pengacak Warna

Kode Heksa Warna Acak

"#"+((1<<24)*Math.random()|0).toString(16);

Deret Warna Terdaftar

Mendapatkan warna secara acak berdasarkan barisan warna yang sudah terdaftar:

// Deret warna
var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"];
// Mengambil warna secara acak dari array `colors`
// dan memasukkan hasilnya ke dalam variabel `a`
var a = colors[Math.floor(Math.random()*colors.length)];

Pembaharuan

Yang ini sedikit panjang, tapi hasilnya lebih stabil dibandingkan dengan yang pertama, serta bisa menghasilkan urutan warna yang lebih indah. Dalam beberapa kesempatan, Saya melihat kode pengacak warna yang pertama menghasilkan warna yang tidak valid (pengacak warna hanya menggenerasikan lima digit kode saja, bukannya enam digit seperti yang seharusnya):

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split(''),
        color = '#';
    for (var i = 0; i < 6; ++i) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

Penggunaan

document.body.style.backgroundColor = getRandomColor();

Referensi: SO - Random Color Generator in JavaScript

Labels: ,

18 Comments:

At Monday, November 19, 2012 at 7:01:00 PM GMT+7, Blogger Beben Koben said...

iki opo toh :p*

 
At Tuesday, November 20, 2012 at 5:17:00 PM GMT+7, Blogger Unknown said...

apakah ini akan bisa membuat warna background berubah2 secara acak, saat menampilkan sebuah halaman ? :p*

 
At Tuesday, November 20, 2012 at 5:40:00 PM GMT+7, Blogger Taufik Nurrohman said...

Bisa. Coba saja taruh kode ini di atas tag </body> lalu simpan:

<script type='text/javascript'>
//<![CDATA[
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
//]]>
</script>

 
At Wednesday, November 21, 2012 at 5:48:00 PM GMT+7, Blogger Unknown said...

wohohoho,, keren nih..

 
At Sunday, December 9, 2012 at 11:18:00 AM GMT+7, Blogger Yusril Ibnu Maulana said...

Wow keren, kalau yg itu kan untuk tag <body> kalau ingin tag <div id> (minsalnya footer) bagaimana agar backgrounnya berubah ubah ?

 
At Monday, December 10, 2012 at 4:09:00 PM GMT+7, Blogger Taufik Nurrohman said...

<div id="footer"> ... </div>
document.getElementById('footer').style.background = "#"+((1<<24)*Math.random()|0).toString(16);

 
At Friday, December 14, 2012 at 6:55:00 PM GMT+7, Blogger Unknown said...

Kalo ingin mengubah warna background berdasarkan deretan warna terdaftar gimana ya mas?

 
At Friday, December 14, 2012 at 10:16:00 PM GMT+7, Blogger Taufik Nurrohman said...

<script>
var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"];
document.body.style.background = colors[Math.floor(Math.random()*colors.length)];
</script>


Bisa juga untuk latar gambar acak. Tinggal ubah deret-deret warna menjadi URL gambar:

<script>
var bg = [
"#fff url('gambar-1.jpg') repeat",
"#000 url('gambar-2.jpg') repeat",
"#39f url('gambar-3.jpg') repeat"
];
document.body.style.background = bg[Math.floor(Math.random()*bg.length)];
</script>

 
At Saturday, December 15, 2012 at 9:12:00 AM GMT+7, Blogger Unknown said...

mas ini kan warnanya berubah, tapi teksturnya background yang ada jadi tertutup warna, bisa ga kalo mengubah warna tanpa menghilangkan/ menutup tekstur background yang telah ada?

 
At Saturday, December 15, 2012 at 9:19:00 AM GMT+7, Blogger Taufik Nurrohman said...

Jangan memakai properti background, cukup properti backgroundColor saja:

var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"];
document.body.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];

 
At Sunday, December 16, 2012 at 11:34:00 AM GMT+7, Blogger Yusril Ibnu Maulana said...

\o/ \o/ \o/

 
At Thursday, April 11, 2013 at 5:27:00 PM GMT+7, Blogger budkalon said...

Hoh, :D Ternyata memang bisa! :D

 
At Wednesday, July 24, 2013 at 7:32:00 PM GMT+7, Blogger Unknown said...

Kang bisa ngak warna tertentu tidak boleh ada dalam background ini karena misal ini kita gunakan pada header takutnya sama dengan warna color pada title

 
At Wednesday, July 24, 2013 at 8:57:00 PM GMT+7, Blogger Taufik Nurrohman said...

Masukkan ke dalam kondisional:

var randomColor = "#"+((1<<24)*Math.random()|0).toString(16);

// Buat pengecualian untuk warna hitam
if (randomColor != "#000000") {
document.getElementById('site-header').style.background = randomColor;
} else {
document.getElementById('site-header').style.background = "#ffffff";
}

 
At Thursday, July 25, 2013 at 11:17:00 AM GMT+7, Blogger Unknown said...

terima kasih mas sudah berhasil....oh ya mas kode kode di atas kan dalam bentuk id (#)bagaimana kalau dalam bentuk class(.) mas misal kita akan merubah tampilan judul sidebar kan biasanya bentuk kode nya kaya gini .sidebar h2{....

 
At Thursday, July 25, 2013 at 11:51:00 PM GMT+7, Blogger Taufik Nurrohman said...

document.write('<sty' + 'le>.sidebar h2 {background-color:' + randomColor + '}</sty' + 'le>');

 
At Friday, July 26, 2013 at 2:57:00 PM GMT+7, Blogger Unknown said...

<script type='text/javascript'>
//<![CDATA[
var randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
document.write('<sty' + 'le>.sidebar h2 {background-color:' + randomColor + '}</sty' + 'le>');
//]]>
</script>

 
At Thursday, August 1, 2013 at 11:17:00 AM GMT+7, Blogger Unknown said...

Mas, kalau warna acak untuk text di kotak blockquote, gimana ?

 

Post a Comment

<< Home