집 > 기사 > 웹 프론트엔드 > JavaScript에서 연도, 월, 일을 병렬로 만드는 방법

JavaScript에서 연도, 월, 일을 병렬로 만드는 방법

PHPz원래의: 2023-04-24 14:45:58418검색

Javascript는 일반적으로 사용되는 웹 프런트엔드 개발 언어입니다. 일반적인 요구 사항 중 하나는 연도, 월, 일의 세 가지 정보를 웹 페이지에 동시에 표시하는 것이며, 이 세 가지 정보는 병렬 형식이어야 합니다. 이는 뉴스 기사 게시 시간, 프로필 페이지의 생일 정보 등 웹 디자인에서 매우 일반적입니다. 그렇다면 Javascript에서 이러한 요구 사항을 어떻게 달성할 수 있습니까?

1. 아이디어

연도, 월, 일의 병렬성을 달성하는 방법에는 여러 가지가 있습니다. 저자는 여기서 비교적 간단한 아이디어를 소개합니다.

1. 먼저 현재 시스템 시간을 가져옵니다.

2. 연도, 월, 일을 각각 변수에 저장하는 등의 시간 정보를 형식화합니다.

3. 취득한 연도, 월, 일 정보를 HTML을 통해 병렬로 표시합니다.

2. 코드 구현

1. 현재 시스템 시간 가져오기

현재 시스템 시간을 가져오려면 Javascript에서 Date() 개체를 사용하면 됩니다.

var today = new Date();

시스템 시간을 가져온 후 연도, 월, 일을 각각 변수에 저장해야 합니다. 여기서는 Date() 객체의 메소드를 사용하여 연도, 월, 일 정보를 얻은 다음 다음과 같이 배열에 저장합니다.

var dateArr = [];
dateArr.push(today.getFullYear());
dateArr.push(today.getMonth() + 1);
dateArr.push(today.getDate());

위 코드에서 getFullYear() 메소드는 전체 연도 정보를 얻습니다. , getMonth() 메소드는 월을 0부터 계산하기 시작하므로 1을 더해야 합니다.

3. 연도, 월, 일 정보를 병렬로 표시

HTML의 table 태그를 사용하여 테이블을 만든 다음 각 행에 연, 월, 일 정보를 표시할 수 있습니다. 코드는 다음과 같습니다.

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

다음으로 Javascript 코드를 사용하여 해당 td 태그에 연도, 월, 일 정보를 채웁니다. 코드는 다음과 같습니다:

document.getElementById("year").innerHTML = dateArr[0];
document.getElementById("month").innerHTML = dateArr[1];
document.getElementById("date").innerHTML = dateArr[2];

3. 전체 코드

<!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. 요약

위의 아이디어를 사용하면 연도, 월, 일의 병렬 표시를 쉽게 구현할 수 있습니다. 실제 프로젝트에서는 CSS 스타일을 통해 테이블 레이아웃을 아름답게 만들어 더욱 아름답고 읽기 쉽게 만들 수도 있습니다. 이는 또한 더 많은 사용자 정의 옵션을 제공합니다.

위 내용은 JavaScript에서 연도, 월, 일을 병렬로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html date 对象 table td

성명：

이전 기사：자바스크립트에서 요일은 무엇입니까?다음 기사：자바스크립트에서 요일은 무엇입니까?