JS로 타임스탬프 계산

[clique aqui para português]

날짜로 작업할 때 때때로 밀리초(타임스탬프) 단위의 날짜가 발생합니다. 어떤 경우에는 작업하는 것이 좋고 어떤 경우에는 복잡하지만 더 쉽게 하기 위해 날짜를 타임스탬프로 변환하고 다른 방법으로 만들 것입니다. 주변: 현재까지의 타임스탬프.

타임스탬프(설명)

타임스탬프는 단일 순간을 나타내며 그 값은 초기 순간부터 경과된 특정 시간에 해당합니다.

이 순간을 UnixEpoch라고 하며 값은 01/01/1970 00:00:00 UTC 이며 브라질 표준 시간대의 경우 시작 날짜는 31/12/1969 21:00:00 입니다.

암호

먼저 인터페이스를 만들고 HTML만 사용하여 간단한 작업을 수행합니다.

<h1>Calcular TimeStamp</h1>
<form name="form_main">
  <fieldset>
    <legend>Date to TimeStamp</legend>
    <label for="date_ini">Data:</label> 
    <input name="date_ini" id="date_ini" size="20" type="date" /><br />
    <label for="hour_ini">Data:</label> 
    <input name="hour_ini" id="hour_ini" size="20" type="time" /><br />
    <label for="timestamp">TimeStamp:</label> 
    <span id="timestamp"></span><br />

    <button type="button" onclick="dateToTimestamp()">Gerar</button>
  </fieldset>

  <fieldset>
    <legend>TimeStamp To Date</legend>
    <label for="timestamp_end">TimeStamp:</label> 
    <input name="timestamp_end" id="timestamp_end" type="text" /><br />
    <label for="date">Data:</label> 
    <span id="date"></span><br />

    <button type="button" onclick="timestampToDate()">Gerar</button>
  </fieldset>

</form>

HTML 구조에서 fieldset을 사용하여 두 부분이 만들어졌습니다. 하나는 데이터에서 타임스탬프로 변환하고 다른 하나는 그 반대로 변환하는 것입니다.

이제 dateToTimestamp 함수를 만들어 봅시다.

function dateToTimestamp() {
  let date_ini = document.form_main.date_ini.value;
  let hour_ini = document.form_main.hour_ini.value;
  let timestamp = new Date(`${date_ini} ${hour_ini}`).getTime();
  document.getElementById('timestamp').innerText = timestamp;
}

이 함수( dateToTimestamp )에서 시작 날짜 및 시간 값을 검색한 다음 getTime() 함수를 사용하여 타임스탬프에서 직접 날짜 값을 검색합니다.

이제 timestampToDate 함수를 만들어 봅시다.

function timestampToDate() {
  let date_ini = new Date(parseInt(document.form_main.timestamp_end.value));
  document.getElementById('date').innerText = date_ini.toLocaleString('pt-BR');
}

이 함수( timestampToDate )에서 타임스탬프의 값을 검색하고 역과정을 수행하여 날짜와 시간으로 다시 변환합니다.

그렇게 간단하게 준비했습니다.

데모

아래에서 작업하는 전체 프로젝트를 참조하세요.

유튜브

시청을 선호하는 경우 youtube(PT-BR의 비디오)에서 개발 내용을 확인합니다.

읽어 주셔서 감사합니다!

질문, 불만 사항 또는 팁이 있는 경우 여기에 의견을 남길 수 있습니다. 기꺼이 답변해 드리겠습니다!

😊😊 또 만나요! 😊😊