Rumah > Artikel > hujung hadapan web > Bagaimana untuk menjadikan tahun, bulan dan hari selari dalam JavaScript
Bagaimana untuk menjadikan tahun, bulan dan hari selari dalam JavaScript
- PHPzasal
- 2023-04-24 14:45:58386semak imbas
Javascript ialah bahasa pembangunan bahagian hadapan web yang biasa digunakan. Salah satu keperluan biasa ialah memaparkan tiga maklumat: tahun, bulan dan hari pada masa yang sama pada halaman web, dan ketiga-tiga maklumat ini perlu dalam bentuk selari. Ini adalah perkara biasa dalam reka bentuk web, seperti masa penerbitan artikel berita, maklumat hari lahir pada halaman profil, dsb. Jadi, dalam Javascript, bagaimana kita boleh mencapai keperluan sedemikian?
1. Idea
Terdapat banyak cara untuk mencapai tahun, bulan dan hari selari Penulis di sini memperkenalkan idea yang agak mudah:
1 masa.
2. Formatkan maklumat masa, seperti menyimpan tahun, bulan dan hari masing-masing ke dalam pembolehubah.
3. Paparkan maklumat tahun, bulan dan hari yang diperolehi secara selari melalui HTML.
2. Pelaksanaan kod
1 Dapatkan masa sistem semasa
Untuk mendapatkan masa sistem semasa, anda boleh menggunakan objek Date() dalam Javascript seperti berikut:
var today = new Date();
2. Pemformatan maklumat masa
Selepas mendapatkan masa sistem, kita perlu menyimpan tahun, bulan dan hari masing-masing ke dalam pembolehubah. Di sini kita menggunakan kaedah dalam objek Date() untuk mendapatkan maklumat tahun, bulan dan hari, dan kemudian menyimpannya dalam tatasusunan, seperti berikut:
var dateArr = []; dateArr.push(today.getFullYear()); dateArr.push(today.getMonth() + 1); dateArr.push(today.getDate());
Dalam kod di atas, getFullYear() kaedah mendapatkan maklumat tahun yang lengkap, Bulan yang diperolehi oleh kaedah getMonth() mula dikira dari 0, jadi ia perlu ditambah dengan 1.
3. Paparan selari maklumat tahun, bulan dan hari
Kita boleh menggunakan teg jadual HTML untuk mencipta jadual, dan kemudian memaparkan maklumat tahun, bulan dan hari dalam setiap baris. Kod tersebut adalah seperti berikut:
<table> <tr> <td>年：</td> <td id="year"></td> </tr> <tr> <td>月：</td> <td id="month"></td> </tr> <tr> <td>日：</td> <td id="date"></td> </tr> </table>
Seterusnya, kami menggunakan kod Javascript untuk mengisi maklumat tahun, bulan dan hari ke dalam tag td yang sepadan. Kodnya adalah seperti berikut:
document.getElementById("year").innerHTML = dateArr[0];
document.getElementById("month").innerHTML = dateArr[1];
document.getElementById("date").innerHTML = dateArr[2];
3. Kod lengkap
<!DOCTYPE html>
<html>
<head>
<title>年月日平行展示</title>
</head>
<body>
<table>
<tr>
<td>年：</td>
<td id="year"></td>
</tr>
<tr>
<td>月：</td>
<td id="month"></td>
</tr>
<tr>
<td>日：</td>
<td id="date"></td>
</tr>
</table>
<script type="text/javascript">
var today = new Date();
var dateArr = [];
dateArr.push(today.getFullYear());
dateArr.push(today.getMonth() + 1);
dateArr.push(today.getDate());
document.getElementById("year").innerHTML = dateArr[0];
document.getElementById("month").innerHTML = dateArr[1];
document.getElementById("date").innerHTML = dateArr[2];
</script>
</body>
</html>
4. Ringkasan
Menggunakan idea di atas, kita boleh mencapai paparan selari tahun dengan mudah , bulan dan hari . Dalam projek sebenar, kita juga boleh menggunakan gaya CSS untuk mencantikkan susun atur jadual supaya lebih cantik dan mudah dibaca. Ini juga memberi kami lebih banyak pilihan penyesuaian.
Atas ialah kandungan terperinci Bagaimana untuk menjadikan tahun, bulan dan hari selari dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!