집 >기술 주변기기 >IT산업 >시간 전 : 게시 날짜를 게시 한 이후 시간으로 게시 날짜를 표시하는 방법

시간 전 : 게시 날짜를 게시 한 이후 시간으로 게시 날짜를 표시하는 방법

Lisa Kudrow원래의: 2025-02-19 12:02:10572검색

시간 전 : 게시 날짜를 게시 한 이후 시간으로 게시 날짜를 표시하는 방법 키 테이크 아웃

“2 분 전 출판”과 같이 게시 된 이후의 시간으로 게시 날짜 표시는“2016 년 9 월 12 일에 출판 된”과 같은 전통적인 날짜 형식과 달리 청중과의 신선함과 참여를 증가시킬 수 있습니다. > time_ago ()라는 PHP 함수는 Unix 타임 스탬프를“지금”,“3 분 전”,“8 시간 전”,“어제”와 같은 사람으로 읽을 수있는 형식으로 변환하는 데 사용될 수 있습니다. 활동은 이틀 전에 발생했습니다.

html

요소는 이러한 동적 날짜를 제시하는 데 사용될 수 있으며, 더 나은 접근성을 보장하기 위해 [dateTime] 속성에 의해 제공되는 폴백 값을 제공합니다. [제목] 속성은 커서가 날짜 텍스트에 배치 된 정확한 날짜를 표시하는 데 사용될 수 있습니다. JavaScript를 사용하여 Facebook과 유사하게 날짜를 실시간으로 증가시킬 수 있습니다. 이는 실시간 업데이트가 중요한 특정 유형의 웹 사이트에 대해 잘 향상 될 수 있습니다.

2015 년 9 월 12 일에 게시 된 형식으로 웹에서 날짜를 제시하는 것이 일반적입니다.

이 예제 각각은 어떤 종류의 활동의 전체 날짜 및/또는 시간을 알려줍니다. 게시 된 기사, 독자 의견, 또는 업로드 된 비디오. 이와 같은 날짜 형식은 완벽하게 합리적으로 보일 수 있습니다. 결국, 그들은 유익하고 인간이 읽을 수 있습니다! 그렇습니다. 그러나 "사람이 읽을 수있는"것은 사용자가 활동이 어떻게 최근에 발생했는지 쉽게 이해할 수 있다는 것을 의미하지 않습니다. 웹은 빠르게 움직이는 장소이며, 콘텐츠를 신선하게주는 것은 청중과 교류하는 열쇠가 될 수 있습니다! 따라서 이러한 일반적인 날짜 형식을 어떻게 개선 할 수 있는지 살펴 보겠습니다.

작은 트릭 다시 한 번, 몇 분 전에 실제로 출판 된 게시물을 우연히 발견했지만 포스트의 부제목은 다음과 같이 말합니다.

2016 년 9 월 12 일에 출판

<:> 는 2016-09-12, 09:41:23 에 게시되었습니다 이 메시지의 문제는 웹 사이트가 방금 업데이트되었거나 자주 그렇게한다는 느낌을 전달하지 않는다는 것입니다. 따라서 이런 식으로 시간을 제시하는 것이 더 매력적이고 훨씬 더 명확합니다. 2 분 전에 출판

전에 이것을 여러 번 본 적이 있습니까? 그러나 얼마나 많은 사람들 이이 프로젝트에 이것을 구축 했습니까? 예를 들어 Facebook을 가져 가십시오 : 첫 번째 예에서와 같이 최신 콘텐츠의 날짜를 제시하면 어떻게 될까요? 다음 이미지에서 왼쪽 및 오른쪽 열을 비교하십시오.

왼쪽 열의 날짜는 그렇게 매력적이지 않습니까? 오른손 사례가 더 매력적입니다. 컨텐츠가 신선하다는 것을 아는 것은 매우 중요합니다. 특히 사람들이 오래되었거나 명확하게 타임 스탬프가 아닌 콘텐츠를 무시할 가능성이 높은 소셜 네트워크에서. 더 나은 날짜 인쇄

</present> 더 나은 날짜 <h2>를 제시하려면 서버 측 스크립팅이 필요 하며이 데모에는 PHP를 사용합니다. 여기에 표시된대로 time_ago ()라는 작은 함수를 만들었습니다. </h2> <at>이 코드의 몇 가지 세부 사항을 살펴 보겠습니다. <ument> 당신이 제공 해야하는 유일한 주장은 $ 시간이며, time_ago (1442082961)와 같은 Unix Timestamp의 날짜입니다. <what> 통과 된 $ 시간과 관련하여 함수가 반환 될 예제의 예 : </what></ument> 지금 - 60 초 전에 발생한 경우 (TimeBefore_now) 3 분 전 - 60 분도 채되지 않으면 (TimeBefore_Minute (s)) 8 시간 전 - 24 시간 이내에 (Timebefore_hour (s)) <less> 어제 - 48 시간 미만 (TimeBefore_Yesterday) <?php define( TIMEBEFORE_NOW, 'now' ); define( TIMEBEFORE_MINUTE, '{num} minute ago' ); define( TIMEBEFORE_MINUTES, '{num} minutes ago' ); define( TIMEBEFORE_HOUR, '{num} hour ago' ); define( TIMEBEFORE_HOURS, '{num} hours ago' ); define( TIMEBEFORE_YESTERDAY, 'yesterday' ); define( TIMEBEFORE_FORMAT, '%e %b' ); define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' ); function time_ago( $time ) { $out = ''; // what we will print out $now = time(); // current time $diff = $now - $time; // difference between the current and the provided dates if( $diff < 60 ) // it happened now return TIMEBEFORE_NOW; elseif( $diff < 3600 ) // it happened X minutes ago return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES ); elseif( $diff < 3600 * 24 ) // it happened X hours ago return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS ); elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday return TIMEBEFORE_YESTERDAY; else // falling back on a usual date format as it happened later than yesterday return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time ); } ?> 12 9 월 - 올해 48 시간 이상이 발생한 경우 (TimeBefore_Format) 2015 년 9 월 12 일 - 올해 (Timebefore_Format_Year). <definition> PHP 정의는 함수 코드에서 구성과 같은 데이터를 분리하기위한 것입니다 (모든 정의 () 발생을 구성 파일에 넣고 헬기 파일의 함수를 배치하는 것이 좋습니다). {num} 정의의 실제 숫자 (분 또는 시간)로 대체됩니다. <ft> 나는 언어/로케일 문제를 피하기 위해 날짜 () 대신 strftime ()을 사용합니다. </ft></definition> 예를 들어, WordPress 사이트에 이것을 얻으려면 간단히 작성하는 것입니다. <ul> <was> 또는 다른 가상의 CMS라면 : <li> <atic> 또는 정적 방식 : </atic> </li> <us> 접근성 및 유용성 <li> <specific> 날짜를 제시하기 위해 사용해야하는 특정 HTML 요소가 있습니다 : <time>. 우리의 경우 Time_ago 함수를 사용할 때 시간 요소의 값이 항상 유효한 날짜 형식이 아닙니다 ( 어제 또는 <li> 3 분 전에 ). 따라서 [dateTime] 속성을 사용하여 폴백 값을 제공해야합니다. <in> 이로 인해 접근성이 향상됩니다 </in> <the> [제목] 속성을 발견 했습니까? 작은 유용성 개선입니다. 날짜 텍스트에 커서를두면 제목 속성에 제시된 메시지가 표시됩니다. 그것은 어떤 이유로 든“실제”날짜를 찾고있는 사용자를위한 것입니다. 더 많은 것이 있다는 느낌을 강화하기위한 작은 CSS 트릭이 있습니다 : </the> </li> <li> </li> <li><cript cript> JavaScript 향상 <h2> <more> 우리가 할 수있는 일이 더 있습니다! Facebook도 실시간으로 날짜를 증가 시킨다는 것을 알았습니까? 1 분 동안 3 분 만에 시청하면 4 분으로 변합니다. 따라서 웹 사이트 유형이 있습니다. 이것은 정말 멋진 향상으로 작동합니다. 이와 같은 기사 게시물에서는 유용하지 않지만 readerrr : 와 같은 사이트에서는 완벽합니다. </more> </h2> <need> 마지막으로 PHP 코드를 JavaScript 동등한 것으로 변환해야합니다. 바닐라 JS 에서이 작업을 수행했습니다 (jQuery 버전도 사용할 수 있지만). 스크립트는 매번 [데이터 시간] 요소를 1 분마다 (settimeout (업데이트, 1000 * 60))마다 걸어 다니며 값을 업데이트합니다. <pre class="brush:php;toolbar:false"><?php define( TIMEBEFORE_NOW, 'now' ); define( TIMEBEFORE_MINUTE, '{num} minute ago' ); define( TIMEBEFORE_MINUTES, '{num} minutes ago' ); define( TIMEBEFORE_HOUR, '{num} hour ago' ); define( TIMEBEFORE_HOURS, '{num} hours ago' ); define( TIMEBEFORE_YESTERDAY, 'yesterday' ); define( TIMEBEFORE_FORMAT, '%e %b' ); define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' ); function time_ago( $time ) { $out = ''; // what we will print out $now = time(); // current time $diff = $now - $time; // difference between the current and the provided dates if( $diff < 60 ) // it happened now return TIMEBEFORE_NOW; elseif( $diff < 3600 ) // it happened X minutes ago return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES ); elseif( $diff < 3600 * 24 ) // it happened X hours ago return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS ); elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday return TIMEBEFORE_YESTERDAY; else // falling back on a usual date format as it happened later than yesterday return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time ); } ?> 온라인 데모 및 코드 다운로드 위 코드의 온라인 데모를 확인하거나 전체 데모 코드를 다운로드 할 수 있습니다. 한 가지 더 위의 예에서, 활동이 3 일 전에 발생한 경우 전체 날짜가 제시됩니다. 그러나 5 일 전, 2 주 전 및 1 개월 전과 같은 방식으로 시간을 제시하기위한 스크립트를 확장하는 것은 매우 쉽습니다.

랩 업 사용자 경험과 만족도는 자세히 설명되어 있습니다. 때때로 동적 날짜 형식과 같은 간단한 세부 사항은 웹 사이트를 조금 더 좋게 만들기에 충분합니다.

그렇다면이 솔루션에 대해 어떻게 생각하십니까? 다음 프로젝트에서 사용하는 것을 고려 하시겠습니까? 그것에 대해 궁금한 점이 있습니까? 의견에 알려주십시오.

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

그건 그렇고, 나는 누군가가 Instagram 사람들에게 122W가 시원하지 않다고 말할 수 있고 2.4yrs는 이해하기가 훨씬 쉽다고 말할 수 있기를 바랍니다. 더 좋을 것입니다. 그렇지 않습니까?

‘Ago’시간 계산에 대한 자주 묻는 질문 (FAQ) 'Ago'시간 기능은 JavaScript에서 어떻게 작동합니까? 시간 전 : 게시 날짜를 게시 한 이후 시간으로 게시 날짜를 표시하는 방법 JavaScript의‘Ago’시간 기능은 특정 이벤트가 발생한 이후 경과 한 시간을 표시하는 방법입니다. 날짜 개체를 사용하여 현재 시간과 이벤트 시간의 차이를 계산합니다. 그런 다음이 차이는 차이의 크기에 따라 초, 분, 시간, 일, 몇 주 또는 몇 년으로 전환됩니다. 결과는“5 분 전”또는“2 일 전”과 같이 인간이 읽을 수있는 형식의 경과 시간을 나타내는 문자열입니다.

웹에서 'Ago'시간 기능을 구현하려면 어떻게해야합니까? 응용 프로그램?

웹 응용 프로그램에서 'Ago'시간 함수를 구현하려면 날짜 개체를 입력으로 가져 와서 경과 시간을 나타내는 문자열을 반환하는 JavaScript 함수를 만들어야합니다. 이 함수는 현재 시간과 입력 날짜의 차이를 계산 하고이 차이를 적절한 단위로 변환하고 결과를 문자열로 형식화해야합니다. 그런 다음‘Ago’시간을 표시해야 할 때 마다이 함수를 호출 할 수 있습니다.

'Ago'시간 기능을 사용하면 어떤 이점이 있습니까?

‘Ago’시간 기능은 시간 정보를 표시하는보다 직관적이고 사용자 친화적 인 방법을 제공합니다. 해석하고 비교하기 어려울 수있는 이벤트의 정확한 날짜와 시간을 표시하는 대신 'Ago'시간 기능은 이해하기 쉬운 형식으로 경과 시간을 보여줍니다. 이것은 사용자 경험을 향상시키고 웹 애플리케이션이보다 매력적이고 대화식으로 만들 수 있습니다.

'전'시간 기능이 미래 날짜를 처리 할 수 있습니까?

예, '전'시간 기능은 미래를 처리 할 수 있습니다. 날짜. 입력 날짜가 현재 날짜보다 늦은 경우 함수는 이벤트 이후 이벤트가 아닌 이벤트까지의 시간을 계산합니다. 결과는 남은 시간을 "5 분 내에"또는 "2 일 내"와 같이 인간으로 읽을 수있는 형식으로 나타내는 문자열입니다. 내 필요?

'Ago'시간 기능은 사용자 정의 가능합니다. 다른 시간 단위, 출력 문자열의 다른 형식 또는 경과 시간을 반올림하기위한 다른 규칙을 사용하도록 함수를 수정할 수 있습니다. 필요한 경우 다른 언어 나 로케일에 대한 지원을 추가 할 수도 있습니다. 기능을 조정하면 웹 애플리케이션의 설계 및 기능에 완벽하게 맞을 수 있습니다.

'Ago'시간 기능은 모든 브라우저와 호환됩니까?

'Ago'Time 기능은 표준 JavaScript 기능을 기반으로하므로 모든 최신 웹 브라우저와 호환됩니다. 그러나 다른 브라우저와 플랫폼에서 코드를 테스트하여 올바르게 일관되게 작동하는지 확인하는 것이 좋습니다. 'Ago'시간 기능이 시간 영역을 처리 할 수 있습니까? 예, 예, 예, 그렇습니다. 'Ago'시간 기능은 시간 영역을 처리 할 수 있습니다. 이 함수는 날짜 개체를 사용하며 사용자 장치의 시간대를 자동으로 고려합니다. 이것은 사용자의 위치 또는 시간대에 관계없이 'Ago'시간이 정확하다는 것을 의미합니다.

'AGO'시간 기능이 올바르게 작동하지 않으면 어떻게 디버깅 할 수 있습니까? '전'시간 함수가 올바르게 작동하지 않으므로 Console.log () 메소드를 사용하여 입력 날짜, 현재 날짜 및 계산 된 차이를 인쇄 할 수 있습니다. 이렇게하면 함수의 오류 또는 불일치를 식별하는 데 도움이됩니다. 브라우저 개발자 도구에서 디버거 도구를 사용하여 기능을 단계적으로 검사하고 동작을 자세히 검사 할 수 있습니다.

모바일 앱에서 'Ago'시간 기능을 사용할 수 있습니까?

. 예, 모바일 앱에서 '전'시간 기능을 사용할 수 있습니다. JavaScript는 모바일 앱을 포함하여 다양한 환경에서 사용할 수있는 다목적 언어입니다. 이 기능은 웹 응용 프로그램에서와 마찬가지로 모바일 앱에서 동일한 방식으로 작동해야합니다.

'Ago'시간 함수의 성능을 최적화하려면 'Ago'시간 기능의 성능을 최적화하기 위해 메모 화 또는 캐싱과 같은 기술을 사용할 수 있습니다. 이러한 기술은 기능을 수행 해야하는 계산 수를 줄여서 더 빠르고 효율적으로 만듭니다. 또한 모든 페이지로드 또는 초마다 필요한 경우에만 'Ago'시간을 업데이트하여 기능이 호출되는 횟수를 최소화 할 수 있습니다.

위 내용은 시간 전 : 게시 날짜를 게시 한 이후 시간으로 게시 날짜를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：배터리 상태 API를 사용하여 개발을 최적화합니다다음 기사：배터리 상태 API를 사용하여 개발을 최적화합니다