Contoh artikel ini menggambarkan cara membuat kalender sederhana oleh JS. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Hari ini saya belajar cara menggunakan JS untuk membuat kalender tahunan, dan meninjau penggunaan ini. Ini sedikit berbeda dari produksi tab. Saya telah menggunakan innerHTML untuk penggunaan baru. Saya harap saya bisa tetap melakukannya. Saya akan memberi Anda lebih banyak saran dari semua JS Masters.
Penggunaan innertml
Sekarang gunakan top.innerhtml = "....."; Metode untuk menulis kode HTML ke lokasi ID ini.
Misalnya, top.innerhtml = ""; dapat muncul tombol di posisi atas yang sesuai!
Ide Implementasi Program:
1. Mirip dengan tab, kecuali bahwa ada div di bagian bawah;
2. Penggunaan innerHTML
3. Penggunaan array
① Definisi: arr [0,1,2,3]
② Gunakan: arr [0]
4. Koneksi string
Function Fungsi: menggabungkan dua string "+"
② Masalah: gunakan () untuk menyelesaikan prioritas dalam koneksi
Menerapkan kode sumber:
Javascript:
Salin kode sebagai berikut: <script type = "text/javascript">
window.onload = function ()
{
var arr = [
'Ini hampir tahun baru, mari kita berangkat dari petasan bersama! ',
'Aku akan segera ke sekolah, tidak bahagia! ',
'Selamat Hari Wanita! ',
'Ini sangat membosankan April',
'Buruh itu mulia! ',
'Selamat Hari Anak! ',
'Betapa panasnya Juli!',
'Hari Angkatan Darat 1 Agustus!',
'Sekolah mulai lagi! '
];
var odiv = document.geteLementById ('tab');
var oli = odiv.geteLementsByTagname ('li');
var otxt = odiv.geteLementsByTagname ('div') [0];
var i = 0;
untuk (var i = 0; i <oli.length; i ++)
{
Oli [i] .index = i;
Oli [i] .onmouseover = function ()
{
untuk (var i = 0; i <oli.length; i ++)
{
Oli [i] .className = '';
}
this.classname = 'aktif';
OTXT.InnerHTML = '<H2>'+(this.index+1)+'aktivitas bulanan </h2> <p>'+arr [this.index]+'</p>';
};
}
};
</script>
CSS:
Salin kode sebagai berikut: <style type = "text/css">
* {padding: 0; margin: 0; }
Li {List-style: None; }
tubuh {latar belakang: #f6f9fc; Font-Family: Arial; }
.calendar {lebar: 210px;
Margin: 50px Auto 0;
padding: 10px 10px 20px 20px;
Latar Belakang: #EAE9E9; }
.calendar ul {width: 210px;
meluap: tersembunyi;
padding-bottom: 10px; }
.calendar li {float: left;
Lebar: 58px;
Tinggi: 54px;
Margin: 10px 10px 0 0;
Perbatasan: 1px solid #fff;
Latar belakang: #424242;
Warna: #FFFF;
Teks-Align: tengah;
kursor: pointer; }
.calendar li h2 {font-size: 20px; Padding-top: 5px; }
.calendar li p {font-size: 14px; }
.calendar .active {border: 1px solid #424242;
Latar Belakang: #FFFF;
Warna: #e84a7e; }
.calendar .active h2 {}
.calendar .active p {font-weight: bold; }
.calendar .text {width: 178px;
padding: 0 10px 10px;
Perbatasan: 1px solid #fff;
Padding-top: 10px;
Latar belakang: #f1f1f1;
Warna: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p {font-size: 12px; Line-Height: 18px; }
</tyle>
Html:
Salin kode sebagai berikut: <tody>
<Div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> Januari </p> </li>
<li> <h2> 2 </h2> <p> Februari </p> </li>
<li> <h2> 3 </h2> <p> Maret </p> </li>
<li> <h2> 4 </h2> <p> April </p> </li>
<li> <h2> 5 </h2> <p> May </p> </li>
<li> <h2> 6 </h2> <p> Juni </p> </li>
<li> <h2> 7 </h2> <p> Juli </p> </li>
<li> <h2> 8 </h2> <p> Agustus </p> </li>
<li> <h2> 9 </h2> <p> September </p> </li>
<li> <h2> 10 </h2> <p> Oktober </p> </li>
<li> <h2> 11 </h2> <p> November </p> </li>
<li> <h2> 12 </h2> <p> Desember </p> </li>
</ul>
<div>
</div>
</div>
</body>
Rendering adalah sebagai berikut:
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.