Cara Membuat Background Pada Element HTML Berubah Otomatis Berdasarkan Waktu

Cara Membuat Background Pada Element HTML Berubah Otomatis Berdasarkan Waktu

Cara Membuat Background Pada Element HTML Berubah Otomatis Berdasarkan Waktu
Hi Web Developer! kembali lagi bersama dengan guru design. kali ini guru design akan berbagi tutorial cara membuat background pada element html berubah otomatis berdasarkan waktu. Buat para master dan sejenisnya silahkan di koreksi kalau saja ada yang kurang tepat, tapi saya rasa tidak ada dan buat para newbie yang membutuhkan pencerahan silahkan di ikuti dan di praktikan di komputer masing-masing. Ok lanjut ketutorial.

Pada sebuah website terdiri dari banyak element, yang di maksud dengan kata element itu sendiri adalah baris kode yang di awali dengan tag pembuka dan tag penutup <> </> ,pada kali ini kita akan membahas bagaimana cara mengubah background element tersebut secara otomatis berdasarkan waktu, contohnya seandainya kita membuka website pada pagai hari maka backgroundnya suasana pagi hari, dan seterusnya. Kita ambil kasus anggap saja kita akan merubah element footer dengan selector id nya #footer maka kita tinggal menerapkannya seperti berikut:

Html

<div id="footer">isi footer</div>
<!--ini adalah selector id yang akan kita rubah background-nya supaya otomatis--> 

CSS

#footer{height:250px;width:100%;text-align:center;color:pink}
/*ini adalah style css yang bisa kita tentukan sendiri*/ 

JavaScript

Kemudian tambahkan JQuery berikut tepat diatas body penutup </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var now = new Date();
 var hours = now.getHours();
 if (hours >= 5 && hours < 8){$('#footer').css({ 'background': '#455A64 url(https://1.bp.blogspot.com/-DqOxXP4zYyA/XlFugSBGviI/AAAAAAAAAig/XzIEtNavFYoVd7puikgU6UN19Guhi3lZwCKgBGAsYHg/s1600/pagi.jpg)repeat' });
 } else if (hours >= 8 && hours < 16){$('#footer').css({ 'background': '#455A64 url(https://1.bp.blogspot.com/-4e5AJ4tB-RE/XlFvG_mmiUI/AAAAAAAAAio/3pI_BL2OYrgRZMIrnIbCBQRAZ8dmaE_NACKgBGAsYHg/s1600/siang.jpg)repeat' });
 } else if (hours >= 16 && hours < 19){$('#footer').css({ 'background': '#455A64 url(https://1.bp.blogspot.com/-vUqqvNBSbZU/XlFvdUSYW1I/AAAAAAAAAiw/3x4H-Ner4NsKz762IuxOcfzzCaOWW7Z6QCKgBGAsYHg/s1600/sore.jpg)repeat' });
 } else if (hours >= 19 || hours < 5){$('#footer').css({ 'background': '#455A64 url(https://4.bp.blogspot.com/-nIydC-ERygU/XlFugWPkT5I/AAAAAAAAAig/mnQuHI954bsCVdogKRlVnm2JrH9IB9YogCKgBGAsYHg/s1600/malam.jpg)repeat' });}});
//]]>
</script>

Result

Sekian semoga bermanfaat terimakasih.

Related Post

2 comments