Cara Membuat Warna Background Website Berubah otomatis Mengikuti Waktu

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Maret 25, 2020
2
Cara Membuat Background Website Berubah otomatis berdasarkan waktu Menggunakan Javascript
Hi Web Developer! kali ini guru design akan berbagi tutorial cara membuat body background website berubah otomatis berdasarkan waktu menggunakan CSS dan JavaScript. Buat para master tolong di koreksi kalau-kalau ada salah, tapi saya rasa tidak ada heheh. Buat para newbie yok di simak dan dipahami lalu di terapkan. Ok lanjut ketutorial:

Pertama

Pertama cari dahulu kode css kamu dimana letaknya, setelah ketemu tambahkan kode ini di css kamu.
CSS

/* Background responsive */
.pagi {
   background:green;
}
.siang { 
   background:yellow;
}
.sore { 
   background:silver;
}
.malam { 
   background:black;
}

Untuk warnanya bisa kamu sesuaikan sendiri misal pagi warna putih berarti kodenya #fff, malam warna hitam berarti kodenya #000 bisa juga menggunakan bahasa inggris black begitupun seterusnya. Untuk mendapatkan kode warna lengkap bisa lihat di sini.

Kedua

Tambahkan JQuery dibawah ini sebelum body penutup </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var tg = new Date();
var jm = tg.getHours();
if (jm > 5 && jm < 8)
document.body.className = "pagi";
else if (jm > 8 && jm < 16)
document.body.className = "siang";
else if (jm > 16 && jm < 19)
document.body.className = "sore";
else if (jm > 19 || jm < 5)
document.body.className = "malam";
});
//]]>
</script>

Result

Selesai

Silahkan di terapkan semoga sukses, jika ada yang ingin di tanyakan silahkan tulis dikolom komentar.

Sekian semoga bermanfaat, terimakasih.
Rafiqi, S.Kom.