Bagaimana untuk menjadikan tahun, bulan dan hari selari dalam JavaScript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menjadikan tahun, bulan dan hari selari dalam JavaScript

PHPz

Lepaskan： 2023-04-24 14:59:08

asal

480 orang telah melayarinya

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();

Salin selepas log masuk

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());

Salin selepas log masuk

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>

Salin selepas log masuk

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];

Salin selepas log masuk

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>

Salin selepas log masuk

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!