Masa yang lalu: Cara Memaparkan Tarikh Terbitan Seiring Sejak Dihantar

Takeaways Key

Memaparkan tarikh penerbitan seperti masa sejak diposkan, seperti "diterbitkan 2 minit yang lalu", dapat meningkatkan rasa kesegaran dan pertunangan dengan penonton anda, berbanding dengan format tarikh tradisional seperti "diterbitkan pada 12 September 2016". >
• fungsi php yang dipanggil time_ago () boleh digunakan untuk menukar timestamp unix menjadi format yang boleh dibaca manusia seperti "sekarang", "3 minit yang lalu", "8 jam yang lalu", "semalam", atau tarikh tertentu jika Aktiviti berlaku lebih dari dua hari yang lalu.
• Elemen HTML
boleh digunakan untuk menyampaikan tarikh dinamik ini, dengan nilai sandaran yang disediakan oleh atribut [DateTime] untuk memastikan kebolehcapaian yang lebih baik. Atribut [tajuk] boleh digunakan untuk memaparkan tarikh yang tepat apabila kursor diletakkan pada teks tarikh.
• JavaScript boleh digunakan untuk meningkatkan tarikh dalam masa nyata, sama seperti Facebook. Ini boleh menjadi peningkatan yang baik untuk jenis laman web tertentu di mana kemas kini masa nyata penting.
Adalah biasa untuk membentangkan tarikh di web dalam format seperti yang diterbitkan pada 12 September, 2015, atau 09/12/2015, 09:41:23 dan 2015-09-12.

Setiap contoh ini menceritakan tarikh penuh dan/atau masa beberapa jenis aktiviti - sama ada artikel yang diterbitkan, atau komen pembaca, atau mungkin video yang dimuat naik.

Format tarikh seperti ini mungkin kelihatan sangat munasabah. Lagipun, mereka bermaklumat dan boleh dibaca manusia! Baiklah, tetapi "boleh dibaca manusia" tidak perlu bermakna pengguna akan dapat memahami bagaimana baru-baru ini aktiviti telah berlaku. Web adalah tempat yang bergerak pantas, dan memberikan kandungan anda rasa kesegaran boleh menjadi kunci untuk melibatkan diri dengan penonton anda! Oleh itu, mari kita lihat bagaimana kita dapat memperbaiki format tarikh biasa ini.

TRIK LITTLE

Sekali lagi, katakan anda telah tersandung pada jawatan yang sebenarnya diterbitkan hanya beberapa minit yang lalu, tetapi subheading pos menyatakan ini:

diterbitkan pada 12 September 2016

... atau ini:

diterbitkan pada 2016-09-12, 09:41:23

Masalah dengan mesej ini adalah bahawa mereka tidak menyampaikan perasaan bahawa laman web anda baru saja dikemas kini atau anda melakukannya dengan kerap. Jadi, pastinya lebih menarik - dan lebih jelas - untuk membentangkan masa dengan cara ini:

diterbitkan 2 minit yang lalu

melihat ini berkali -kali sebelum ini? Tetapi berapa ramai daripada anda yang telah membina ini ke dalam projek anda? Ambil Facebook sebagai contoh: Apa yang akan kelihatan seperti jika mereka menyampaikan tarikh untuk kandungan terkini seperti dalam contoh pertama saya? Bandingkan lajur kiri dan kanan dalam imej berikut:

Tarikh lajur kiri tidak begitu menarik, adakah mereka? Saya akan bertaruh contoh tangan yang betul lebih menarik kepada anda. Mengetahui bahawa kandungannya segar sangat penting - terutamanya di rangkaian sosial, di mana orang lebih cenderung untuk mengabaikan kandungan yang sudah lama atau tidak dengan jelas.

Mencetak tarikh yang lebih baik

Untuk membentangkan tarikh yang lebih baik , anda memerlukan beberapa skrip sisi pelayan, dan saya akan menggunakan PHP untuk demo ini. Saya mencipta fungsi kecil yang dipanggil time_ago (), seperti yang ditunjukkan di sini:

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

Mari lihat beberapa butiran kod ini.

• Satu -satunya hujah yang mesti anda sediakan ialah $ masa, dan ia adalah tarikh dalam Unix Timestamp - seperti Time_ago (1442082961).
• Contoh apa fungsi akan kembali berkenaan dengan masa $ berlalu:
  • sekarang - jika ia berlaku kurang dari 60 saat yang lalu (timebefore_now)
  • 3 minit yang lalu - jika kurang dari 60 minit yang lalu (timebefore_minute (s))
  • 8 jam yang lalu - jika kurang dari 24 jam yang lalu (timebefore_hour (s))
  • semalam - jika kurang dari 48 jam yang lalu (timebefore_yesterday)
  • 12 Sep - Jika lebih daripada 48 jam dan berlaku tahun ini (timebefore_format)
  • 12 Sep, 2015 - Jika berlaku tidak tahun ini (timebefore_format_year).
• Definisi PHP adalah untuk memisahkan data seperti konfigurasi dari kod fungsi (ia akan menjadi amalan yang baik untuk meletakkan semua kejadian define () ke dalam fail konfigurasi dan fungsi dalam fail pembantu).
• {num} dalam definisi digantikan dengan nombor sebenar (minit atau jam).
• Saya menggunakan strftime () bukannya tarikh () untuk mengelakkan isu bahasa/locale.

Jadi, sebagai contoh, jika anda ingin mendapatkan ini ke laman WordPress anda, anda hanya akan menulis ini:

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

atau jika ia adalah beberapa CMS hipotesis lain:

<?=time_ago( $post->date_created )?>

atau cara statik:

<?=time_ago( 1447571705 )?>

kebolehcapaian & kebolehgunaan

Terdapat elemen HTML tertentu yang perlu anda gunakan untuk menyampaikan tarikh: . Dalam kes kami, apabila menggunakan fungsi time_ago, nilai elemen masa tidak selalu dalam format tarikh yang sah (seperti semalam atau 3 minit yang lalu ). Oleh itu, anda juga harus memberikan nilai sandaran dengan menggunakan atribut [DateTime]:

Published <time 
    datetime="<?=date( 'Y-m-d', $time )?>" 
    title="<?=strftime( date( 'Y', $time ) == 
        date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time )?>">
    <?=time_ago( $time )?>
    </time>

Ini akan menghasilkan kebolehcapaian yang lebih baik, contohnya:

Published <time datetime="2015-09-12" title="September 12">3 minutes ago</time>

Adakah anda melihat atribut [tajuk]? Ia adalah peningkatan kebolehgunaan yang kecil: Meletakkan kursor teks pada tarikh menunjukkan mesej yang dibentangkan dalam atribut tajuk. Itu untuk pengguna yang, atas sebab tertentu, sedang mencari tarikh "sebenar". Berikut adalah helah CSS kecil untuk meningkatkan perasaan bahawa ada sesuatu yang lebih:

<span>time<span><span>[title]</span></span>
</span><span>{
</span>    <span>cursor: help;
</span><span>}</span>

JavaScript Enhancement

Ada satu lagi perkara yang boleh kita lakukan! Pernahkah anda perasan bahawa Facebook juga meningkatkan tarikh dalam masa nyata? Hanya menonton pada 3 minit selama satu minit dan ia akan berubah menjadi 4 minit dan sebagainya. Oleh itu, terdapat jenis laman web ini berfungsi sebagai peningkatan yang sangat baik. Ia tidak akan berguna pada jawatan artikel seperti ini, tetapi ia sempurna di laman web seperti ReaderRr:

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

Akhirnya, kita perlu menukar kod PHP menjadi setara JavaScript. Saya telah melakukan ini untuk anda di Vanilla JS (walaupun versi jQuery juga tersedia). Skrip berjalan melalui setiap elemen [data-masa] sekali setiap minit (setTimeout (dikemas kini, 1000 * 60)) dan mengemas kini nilai:

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

demo dalam talian dan muat turun kod

anda boleh menyemak demo dalam talian kod di atas atau memuat turun kod demo penuh.

Satu lagi perkara

Dalam contoh -contoh di atas, tarikh penuh dibentangkan jika aktiviti telah berlaku tiga atau lebih hari yang lalu. Tetapi agak mudah untuk memperluaskan skrip untuk menyampaikan masa dalam cara seperti 5 hari yang lalu, 2 minggu yang lalu dan 1 bulan yang lalu, dan sebagainya:

<?=time_ago( $post->date_created )?>

Bungkus

Pengalaman dan kepuasan pengguna secara terperinci. Kadang -kadang terperinci mudah - seperti format tarikh dinamik - sudah cukup untuk menjadikan laman web kami sedikit lebih baik.

Jadi, apa pendapat anda tentang penyelesaian ini? Adakah anda akan mempertimbangkan menggunakannya pada projek anda yang seterusnya? Adakah anda mempunyai soalan mengenainya? Tolong beritahu saya dalam komen.

dengan cara ini, saya harap seseorang dapat memberitahu orang Instagram bahawa 122W tidak sejuk, dan 2.4yrs akan lebih mudah difahami. Itu lebih baik, bukan?

Soalan Lazim (Soalan Lazim) Mengenai Mengira Masa 'Ago'

Bagaimanakah fungsi masa 'Ago' berfungsi dalam JavaScript? Ia menggunakan objek tarikh untuk mengira perbezaan antara masa semasa dan masa peristiwa. Perbezaan ini kemudiannya ditukar menjadi saat, minit, jam, hari, minggu, atau tahun, bergantung kepada magnitud perbezaannya. Hasilnya adalah rentetan yang mewakili masa berlalu dalam format yang boleh dibaca manusia, seperti "5 minit yang lalu" atau "2 hari yang lalu". Permohonan?

Untuk melaksanakan fungsi masa 'Ago' dalam aplikasi web anda, anda perlu membuat fungsi JavaScript yang mengambil objek tarikh sebagai input dan mengembalikan rentetan yang mewakili masa berlalu. Fungsi ini harus mengira perbezaan antara masa semasa dan tarikh input, tukar perbezaan ini ke dalam unit yang sesuai, dan format hasilnya sebagai rentetan. Anda kemudian boleh memanggil fungsi ini apabila anda perlu memaparkan masa 'yang lalu'.

Apakah faedah menggunakan fungsi masa 'Ago'? Daripada menunjukkan tarikh dan masa yang tepat peristiwa, yang sukar untuk mentafsir dan membandingkan, fungsi masa 'yang lalu' menunjukkan masa berlalu dalam format yang mudah difahami dan berkaitan dengan. Ini dapat meningkatkan pengalaman pengguna dan menjadikan aplikasi web anda lebih menarik dan interaktif.

Bolehkah fungsi masa 'Ago' mengendalikan tarikh masa depan? tarikh. Jika tarikh input lebih awal daripada tarikh semasa, fungsi akan mengira masa sehingga peristiwa dan bukannya masa sejak acara tersebut. Hasilnya akan menjadi rentetan yang mewakili masa yang tinggal dalam format yang boleh dibaca manusia, seperti "dalam 5 minit" atau "dalam 2 hari". Keperluan saya?

Fungsi masa 'Ago' sangat disesuaikan. Anda boleh mengubahsuai fungsi untuk menggunakan unit masa yang berlainan, format yang berbeza untuk rentetan output, atau peraturan yang berbeza untuk membulatkan masa berlalu. Anda juga boleh menambah sokongan untuk bahasa atau kawasan yang berbeza, jika diperlukan. Dengan tweaking fungsi, anda boleh menjadikannya sesuai dengan reka bentuk dan fungsi aplikasi web anda. Fungsi berdasarkan ciri -ciri JavaScript standard, jadi ia harus bersesuaian dengan semua pelayar web moden. Walau bagaimanapun, ia sentiasa merupakan idea yang baik untuk menguji kod anda pada pelayar dan platform yang berbeza untuk memastikan ia berfungsi dengan betul dan konsisten. Fungsi masa 'Ago' boleh mengendalikan zon waktu. Fungsi ini menggunakan objek tarikh, yang secara automatik mengambil kira zon waktu peranti pengguna. Ini bermakna bahawa masa 'yang lalu' akan tepat tanpa mengira lokasi pengguna atau zon waktu. Fungsi masa 'Ago' tidak berfungsi dengan betul, anda boleh menggunakan kaedah Console.log () untuk mencetak tarikh input, tarikh semasa, dan perbezaan yang dikira. Ini akan membantu anda mengenal pasti sebarang kesilapan atau ketidakkonsistenan dalam fungsi tersebut. Anda juga boleh menggunakan alat debugger dalam alat pemaju penyemak imbas anda untuk melangkah melalui fungsi dan memeriksa tingkah lakunya secara terperinci. Ya, anda boleh menggunakan fungsi masa 'Ago' dalam aplikasi mudah alih. JavaScript adalah bahasa serba boleh yang boleh digunakan dalam banyak persekitaran yang berbeza, termasuk aplikasi mudah alih. Fungsi ini harus berfungsi dengan cara yang sama dalam aplikasi mudah alih seperti yang dilakukan dalam aplikasi web.

Bagaimanakah saya dapat mengoptimumkan prestasi fungsi masa 'Ago'? Teknik -teknik ini dapat mengurangkan bilangan pengiraan yang perlu dilakukan, menjadikannya lebih cepat dan lebih efisien. Anda juga boleh meminimumkan bilangan kali fungsi dipanggil dengan mengemas kini masa 'yang lalu' hanya apabila perlu, dan bukannya pada setiap beban halaman atau setiap saat.

Atas ialah kandungan terperinci Masa yang lalu: Cara Memaparkan Tarikh Terbitan Seiring Sejak Dihantar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!