 |
| Javascript Change Background |
Assalamu'alaikum Warohmatullohi Wabarokatuh...
Selamat malam para pembaca,
malam ini saya menuliskan sebuah tutorial yang saya pelajari dan saya bagikan kepada Anda untuk saling berbagi. Karna ilmu yang baik adalah ilmu yang dapat berguna dan bermanfaat untuk diri sendiri dan orang lain.
Persiapan :
- Kesiapan diri Anda.
- Sedikit camilan dan minum.
- Text editor (website).
Langkah-Langkah :
- Buat sebuah file baru dan save dengan extensi .html atau .php (localhost).
- Salin dan pastekan script dibawah ini.
- Jalankan dan testing.
- Selamat, Anda telah selesai.
Script untuk HTML tombol warna :
<!DOCTYPE html>
<html>
<head>
<title>Mengubah Warna Background</title>
</head>
<body>
<div id="pilihan_warna">
<button class='merah' onclick="javascript:gantiWarna(0)"> Merah </button>
<button class='kuning' onclick="javascript:gantiWarna(1)"> Kuning </button>
<button class='hijau' onclick="javascript:gantiWarna(2)"> Hijau </button>
<button class='biru' onclick="javascript:gantiWarna(3)"> Biru </button>
<button class='hitam' onclick="javascript:gantiWarna(4)"> Hitam </button>
<button class='orange' onclick="javascript:gantiWarna(5)"> Orange </button>
<button class='putih' onclick="javascript:gantiWarna(6)"> Putih </button>
</div>
</body>
</html>
Script untuk CSS tombol warna :
<style type="text/css">
#pilihan_warna {
margin:0 auto;
background: #ffffff;
width: 450px;
overflow: auto;
}
.merah {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: #ff0000;
}
.kuning {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: yellow;
}
.hijau {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: green;
}
.biru {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: blue;
}
.hitam {
padding: 5px;
margin:5px;
color: #fff;
border:1px dotted #000;
background: black;
}
.orange {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: orange;
}
.putih {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: white;
}
</style>
Script javascript :
<script type="text/javascript">
var backColor = new Array();
backColor[0] = '#ff0000';
backColor[1] = 'yellow';
backColor[2] = 'green';
backColor[3] = 'blue';
backColor[4] = 'black';
backColor[5] = 'orange';
backColor[6] = 'white';
function gantiWarna(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>
Script keseluruhan :
<!DOCTYPE html>
<html>
<head>
<title>Mengubah Warna Background</title>
</head>
<style type="text/css">
#pilihan_warna {
margin:0 auto;
background: #ffffff;
width: 450px;
overflow: auto;
}
.merah {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: #ff0000;
}
.kuning {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: yellow;
}
.hijau {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: green;
}
.biru {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: blue;
}
.hitam {
padding: 5px;
margin:5px;
color: #fff;
border:1px dotted #000;
background: black;
}
.orange {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: orange;
}
.putih {
padding: 5px;
margin:5px;
border:1px dotted #000;
background: white;
}
</style>
<script type="text/javascript">
var backColor = new Array();
backColor[0] = '#ff0000';
backColor[1] = 'yellow';
backColor[2] = 'green';
backColor[3] = 'blue';
backColor[4] = 'black';
backColor[5] = 'orange';
backColor[6] = 'white';
function gantiWarna(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>
<body>
<div id="pilihan_warna">
<button class='merah' onclick="javascript:gantiWarna(0)"> Merah </button>
<button class='kuning' onclick="javascript:gantiWarna(1)"> Kuning </button>
<button class='hijau' onclick="javascript:gantiWarna(2)"> Hijau </button>
<button class='biru' onclick="javascript:gantiWarna(3)"> Biru </button>
<button class='hitam' onclick="javascript:gantiWarna(4)"> Hitam </button>
<button class='orange' onclick="javascript:gantiWarna(5)"> Orange </button>
<button class='putih' onclick="javascript:gantiWarna(6)"> Putih </button>
</div>
</body>
</html>
Xample :
http://www.fittraferdiansyah.blogspot.com
Download :
http://www.ferdiansyah.xyz
Keterangan :
var backColor = new Array();
// Membuat bentuk array atau pilihan warna.
backColor[0] = '#ff0000';
// Warna pertama (merah) dalam hexadecimal
backColor[1] = 'yellow';
// Warna kedua (kuning)
function gantiWarna(whichColor){
//Fungsi ganti warna dimana warna diambil dari variabel backcolor diatas
document.body.style.background = backColor[whichColor];
}
// Membuat style warna background yang terdapat di dalam tag body.
Thanks for visiting And happy coding!!
Wassalamu'alaikum Warohmatullohi Wabarokatuh...
0 Komentar untuk "MENGUBAH WARNA BACKGROUND DENGAN JAVASCRIPT"