1. Ikhtisar
Kadang -kadang, untuk memperkaya efek tampilan halaman, halaman dibuat menjadi gaya yang mengubah latar belakang halaman sesuai waktu, sehingga penampil tidak akan merasa bosan dengan situs web, dan juga akan merasa bahwa situs web dibuat sangat baru. Contoh ini memperoleh waktu sistem saat ini dengan metode getHours () dari objek tanggal, dan kemudian mengubah gambar latar belakang halaman sesuai dengan periode waktu yang berbeda.
2. Poin teknis
Metode getHours () dari objek tanggal dalam JavaScript digunakan untuk mendapatkan jam waktu sistem saat ini, dan kemudian menentukan apakah jam saat ini memenuhi periode waktu yang ditentukan dalam periode waktu tertentu. Jika bertemu, gunakan metode write () dari objek dokumen untuk menampilkan gambar pada halaman dan output informasi prompt yang ditentukan di bawah gambar.
3. Implementasi spesifik
(1) Gunakan fungsi now.getHours () untuk mendapatkan jam waktu sistem saat ini. Ubah latar belakang yang berbeda menurut saat ini. Kode kunci dari skrip JavaScript utama adalah sebagai berikut:
<skrip bahasa = "javaScript"> var sekarang = tanggal baru (); var hour = now.getHours (); if (hour> = 0 && hour <5) {document.write ("<Tenter> <mmg src = '1.jpg' wolor = '600' tinggi = '399'> <center>"); document. =#ff9900> Ini adalah titik pagi "+jam+" point, saya berharap Anda mendapatkan mimpi yang baik </font> ");} if (hour> = 5 && hour <8) {document.write (" <penter> <mmg src = '2.jpg' width = '600' height = '399'> <penter> "); DOKUMENT."; wajah = warna tebal =#ff9900> Ini adalah titik "+jam+" di pagi hari, saya mengucapkan selamat hari </font> ");} if (hour> = 8 && hour <11) {document.write (" <penter> <mmg src = '3.jpg' width = '600' Tinggi = '399'> <Tenter> "); ocument.write (" <p> "); document.write (" <font size = 6 face = bold color =#ff9900> Ini waktu pagi "+jam+" point, jangan lupa untuk mengambil nap dan minum seteguk air </font> ");} jika jam (jam> = = 11). src = '4.jpg' width = '600' height = '399'> <Tenter> "); document.write (" <p> "); document.write (" <font size = 6 face = bold color =#ff9900> Ini waktu siang "+jam+" waktu, ingat untuk makan lebih banyak </font> "); 17) {document.write ("<senter> <mmg src = '5.jpg' width = '600' height = '399'> <Enter>"); document.write ("<p>"); Document.write ("<font size = 6 face = bold color =#ff9900> Ini waktu sore" Waktu </font> ");} if (hour> = 17 && hour <24) {document.write (" <penter> <mmg src = '6.jpg' width = '600' height = '399'> <Center> "); document.write (" <p> "); document.write (" <font color = 6 face = 6 face. hati -hati tertidur lebih awal </font> ");} </script>(2) Tambahkan sepotong kode gaya CSS sebagai berikut:
<style type = "text/css"> body {background-color: #fffff;} </style>(3) Tambahkan sepotong kode gaya CSS sebagai berikut:
<style type = "text/css"> body {background-color: #fffff;} </style>Metode getHours () dari objek tanggal dalam JavaScript kembali satu jam, dan nilai pengembalian adalah angka, antara 0 dan 23, mewakili jam hari yang berisi atau dimulai pada saat yang diwakili oleh objek tanggal ini (dijelaskan dengan zona waktu setempat).
Di atas adalah pengetahuan yang relevan tentang kode JS yang diperkenalkan editor kepada Anda untuk menyadari efek mengubah latar belakang halaman sesuai waktu. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!